0

我有一个带有自动完成功能的文本框。当输入框的文本包含某些字符时，我还在自动完成下拉列表中添加了一个自定义元素。我正在添加这个自定义元素来自定义插件的 _renderItem 函数：

$tb.autocomplete({
    /* OPTIONS HERE */
}).data("autocomplete")._renderItem = function (ul, item) {
  if ($tb.val().indexOf('someText') > -1){
    ul.append('<li class="dropdown-element"><a href="#" class="my-option">My custom option</a></li>');
  }
  return false;
}

我希望每当用户键入包含“someText”的内容并按 Enter 键（之前没有在下拉列表中选择任何内容）时，都会为我的自定义元素引发自动完成的“选择”事件。

我尝试在文本框上为“keyup”事件添加一个处理程序，但是每次按 Enter 时都会调用该处理程序（即使在下拉列表中选择了一些元素），并且我无法从“选择”中取消事件的传播' 自动完成的事件处理程序。（我尝试了 e.stopPropagation 和 e.originalEvent.stopPropagation 但它仍然由“keyup”处理程序处理）。

关于如何实现这一目标的任何想法？谢谢

4

2 回答 2

0

如果用户没有输入整个内容，则将其someText作为有效选项，通过事件将其删除，但如果他们有，则将其保留 - http://jsfiddle.net/tj_vantoll/bgstB/。open

这种方法的唯一问题是，如果您需要在用户键入类似事件时调用事件，则不会调用foo bar someText该事件。open

于 2012-07-15T10:52:46.250 回答
0

好的，我花了一段时间才找到解决方案，但这里是：

var autocomplete = $tb.autocomplete({
    /* OPTIONS HERE */
  select:function(e, ui){
    // The 'autocompleteselected' event wraps a 'menuselected' event that wraps a 'keydown' event
    // we stop the propagation of this event to prevent the event handler of keydown from processing the enter when an item was selected by that enter
    event.originalEvent.originalEvent.stopPropagation();

    ProcessSelectedElement(ui);
  }
});
autocomplete.data("autocomplete")._renderItem = function (ul, item) {
  if ($tb.val().indexOf('someText') > -1){
    ul.append('<li class="dropdown-element"><a href="#" class="my-option">My custom option</a></li>');
  }
  return false;
}

autocomplete.keydown(function(e){
    if (e.keyCode == 13 && !e.isPropagationStopped() && tb.val().indexOf('someText') > -1) {
      ProcessCustomElement();
    }
});

基本上，我所做的是在此事件选择现有项目之一时停止传播原始 keydown 事件。在 keydown 事件处理程序中，我只是验证该事件的传播尚未停止并相应地处理输入。

一个可能的问题是，由于某种原因，keydown 的事件处理程序在 'autocompleteselected' 事件处理程序之前执行，在这种情况下，事件传播不会停止，但我所做的测试没有显示这个问题.

于 2012-07-15T16:57:41.880 回答