Question

我有一个带有自动完成功能的文本框。当输入框的文本包含某些字符时，我还在自动完成下拉列表中添加自定义元素。我正在添加这个自定义元素来自定义插件的_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键（之前没有在下拉列表中选择任何内容）时，就会为我的自定义元素引发自动完成的'select'事件。

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

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

Answer 1

如果使用someText作为有效选项，如果用户没有输入整个事件，则通过open事件删除它，但如果他们有 - { {3}}

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

Answer 2

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

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'事件处理程序之前执行，在这种情况下，事件传播不会停止，但我已经完成的测试不会显示这个问题。

jQuery UI自动完成：在输入时选择自定义项

2 个答案: