有没有可能触发/绑定jQuery UI事件？

Question

可能是重复问题：
jQuery自动完成触发更改事件

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

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

是否有可能通过将jQuery UI的change事件绑定到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(...

- Backo

---

如果我没记错的话，每个jQuery UI小部件的事件都以小部件名称为前缀。 - zzzzBov

你不需要绑定那么多事件，这就像是你在尝试制作自己的自动完成功能，而 jQuery UI 已经为你做好了这项工作。 - Scott Selby

@Scott Selby - 我正在尝试在其他事件上触发change事件。可能，user1827044和zzzzBov已经有了这个想法... - Backo

@Scott Selby - 无论如何，谢谢你！;-) - Backo

你可以在代码中的另一个位置设置.autocomplete和另一个委托来处理.change()事件 - .change()将覆盖keypress和autocomplete select方法。 - Scott Selby

Answer 1

如果你只是将自动完成的函数进行抽象，我认为这并不难。

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

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

function changeFunction() {
//make something
}

- user1827044

---

如何从 $('#autocomplete_field').bind('keypress', function(event) { changeFunction(); }); 将 event 和 ui 参数传递给 changeFunction() 函数？ - Backo

编辑 changefunction 函数，使其接受参数，如下所示：function changeFunction(event, ui) { //做一些事情 }。然后使用 changeFunction(event, ui) 调用它。 - user1827044

Answer 2

这将涵盖文本框的自动完成：

  $(".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)如何使用的概念吗？

对于同一个文本框在两个地方处理事件有点多余，但如果这是你想要的 - 这将具有自动完成的功能，并且还有另一个地方来处理每次文本框发生变化的情况，无论是如何改变的。

- Scott Selby

---

我尝试了你的代码，但似乎并没有在每次文本框改变时触发“change”事件（例如，在你的示例中，通过“keyup”，“keydown”等事件）。 - Backo

在函数中的任何位置，$(this) 都可以被调用，并且它指的是触发事件的元素。 - Scott Selby

顺便提一下：我需要 ui 变量，因为我想要检查一个项目是否从 jQuery 自动完成菜单中被选中（请参见这里）。 - Backo

你可能想找到更好的方法来利用自动完成的 select: function 部分，当用户从下拉列表中选择时触发，或者你可以使用 .blur() 方法检查文本框的 val() 是否与自动完成返回的任何值匹配。 - Scott Selby

很难弄清楚如何使用select事件来达到我想要的行为...所以，我想到的一个解决方案是使用change方法和一些回调函数。 - Backo

Answer 3

快速查看了 jQuery UI 源码 后，我最初的猜测基本上是正确的（自从我使用任何 jQuery UI 小部件以来已经有一段时间了）。 autocomplete等使用 jQuery.Widget 构建器，该构建器将使用小部件名称（或提供了 widgetEventPrefix 的名称）作为任何调用的事件的前缀。

对于 autocomplete，这意味着事件应该可以通过 autocompletechange、autocompleteclose 等触发和绑定（您可以在 autocomplete widget 的文档页面 上找到其余事件）。

- zzzzBov