Question

可能重复：
jQuery AutoComplete Trigger Change Event

我正在使用jQuery UI v1.9并且我成功实现了jQuery UI Autocomplete小部件。我想知道是否有可能触发/绑定jQuery UI事件，如果是这样，如何实现。也就是说，例如，如果我有

$('#autocomplete_field" %>').autocomplete({
  change: function (event, ui) {
    // Make something...
  },
  minLength: 2,
  ...
});

是否可以通过将其绑定到change事件来运行jQuery UI keypress事件？

注意：我试过

$('#autocomplete_field').bind('keypress', function(event) {
    $('#autocomplete_field').autocomplete('option', 'change').call();
});

但是我收到以下错误（来自Firebug控制台）：

TypeError: elem.nodeName is undefined
...ks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase(...

Answer 1

在快速查看jQuery UI source后，我的初步猜测大部分是正确的（自从我使用任何jQuery UI小部件以来已经有一段时间了。）

autocomplete等使用jQuery.Widget构建器，该构建器为使用窗口小部件名称调用的任何事件添加前缀（如果提供了widgetEventPrefix，则为autocomplete。）

对于autocompletechange，这意味着事件应该是可触发的，并且可以通过autocompleteclose，{{1}}等进行绑定（您可以在autocomplete widget's documentation page上找到其他事件）

Answer 2

我认为如果你从自动完成中抽象出这个函数会很容易。

$('#autocomplete_field" %>').autocomplete({
    change: function (event, ui) {
        changeFunction()
    },
    minLength: 2,
          ...
});

$('#autocomplete_field').bind('keypress', function(event) {
    changeFunction();
});

function changeFunction() {
//make something
}

Answer 3

这将涵盖文本框的自动填充功能：

  $(".autoCompleteTxtBox").autocomplete({
                 source: "www.url.com/Source",
                 select: function (event, ui) {
                     //something to do when user selects from dropdown
                 }
             });



 $(document).on('keyup, keydown, change', '.selectorClass', function(event){    
       //I'm not sure what you need ui for exactly
      var pos = $(this).position(); // gets position of .selectorClass
      var val = $(this).val(); // gets current value of .selectorClass
      var width = $(this).width(); // gets width
     // if there are multiple '.selectorClass' - $(this) is the one that fired event
   });

这能让您了解$（this）的使用方式吗？

在同一个文本框的2个位置处理事件有点多余，但如果这就是你想要的 - 这将有一个正常运行的自动完成，并且每当文本框发生变化时，无论如何更改，都会有另一个地方进行处理。

是否可以触发/绑定jQuery UI事件？

3 个答案: