你如何使用 .on() 绑定 jQuery UI 自动完成？

How do you bind jQuery UI autocomplete using .on()?

提问by paul

This question was answered for the live() method, but the live() method has been deprecated as of jQuery 1.7 and replaced with the .on() method and this answer does not work for on().

这个问题是为 live() 方法回答的，但是 live() 方法从 jQuery 1.7 开始被弃用并替换为 .on() 方法，这个答案不适用于 on()。

Here's where it was answered before: Bind jQuery UI autocomplete using .live()

这是之前回答的地方： Bind jQuery UI autocomplete using .live()

Anyone know how to do the same thingwith on()?

有人知道如何用 on()做同样的事情吗？

If you change the syntax to something like

如果您将语法更改为类似

$(document).on("keydown.autocomplete",[selector],function(){...});

from

从

$([selector]).live("keydown.autocomplete",function(){...});

It kind of works, but it interacts with the internal autocomplete events in a weird way. With live(), if you use the selectevent and access the event.target, it gives you the id of the input element. If you use on(), it gives you the id of the dropdown menu "ui-active-menuitem". Something like this:

它有点工作，但它以一种奇怪的方式与内部自动完成事件交互。使用 live()，如果您使用select事件并访问 event.target，它将为您提供输入元素的 id。如果您使用 on()，它会为您提供下拉菜单“ui-active-menuitem”的 id。像这样的东西：

$( ".selector" ).autocomplete({
   select: function(event, ui) { 
     console.log(event.target.id);
 }
});

But - if you use the "open" event, it will give you the id I'm looking for - just not at the right time (I need it after it is selected). At this point, I'm using a workaround of grabbing the ID of the input element in the open event function, storing it in a hidden field, then accessing it in the select method where I need it.

但是 - 如果你使用“open”事件，它会给你我正在寻找的 id - 只是不是在正确的时间（我在选择它后需要它）。在这一点上，我正在使用一种解决方法，即在 open 事件函数中获取输入元素的 ID，将其存储在一个隐藏字段中，然后在我需要的地方在 select 方法中访问它。

回答by mgibsonbr

If I understood correctly, your problem looks very similar to one I saw in another topic. I'll adapt my answerto your case, let's see if it solves your problem:

如果我理解正确，您的问题看起来与我在另一个主题中看到的非常相似。我会根据您的情况调整我的答案，让我们看看它是否能解决您的问题：

$(document).on("focus",[selector],function(e) {
    if ( !$(this).data("autocomplete") ) { // If the autocomplete wasn't called yet:
        $(this).autocomplete({             //   call it
            source:['abc','ade','afg']     //     passing some parameters
        });
    }
});

Working example at jsFiddle. I used focusinstead of keydownbecause I need to re-trigger the event, and I don't know how to do it with key/mouse events.

jsFiddle 的工作示例。我使用focus而不是keydown因为我需要重新触发事件，我不知道如何使用键/鼠标事件来做到这一点。

Update: You could also consider using clone, if your additional inputs will have the same autocomplete as an existing one:

更新：您也可以考虑使用clone，如果您的附加输入将具有与现有输入相同的自动完成功能：

var count = 0;
$(cloneButton).click(function() {
    var newid = "cloned_" + (count++); // Generates a unique id
    var clone = $(source) // the input with autocomplete your want to clone
        .clone()
        .attr("id",newid) // Must give a new id with clone
        .val("") // Clear the value (optional)
        .appendTo(target);
});

See the updated fiddle. There are also jQuery template plugins that might make this solution easier (although I haven't used one myself yet, so I can't talk from experience).

请参阅更新的小提琴。还有一些 jQuery 模板插件可能会使这个解决方案更容易（虽然我自己还没有使用过，所以我不能从经验谈起）。

回答by paul

This seems just to be some peculiarity of the interaction between .on() and autocomplete. If you want to do this:

这似乎只是 .on() 和自动完成之间交互的一些特殊性。如果你想这样做：

$(function(){
  $('.search').live('keyup.autocomplete', function(){
    $(this).autocomplete({
      source : 'url.php'
    });
  });
});

This works with on():

这适用于 on()：

$(function(){
  $(document).on("keydown.autocomplete",".search",function(e){
    $(this).autocomplete({
      source : 'url.php'
    });
  });
});

You can access the event.target.id of the element that the autocomplete was called on with the parameter of the on() callback function (ein the code above).

您可以使用 on() 回调函数的参数（上面代码中的e）访问调用自动完成功能的元素的 event.target.id 。

The difference is with on(), the eventparam in the internal events works differently, holding different values. With live(), the event.target.id in the selectfunction will hold the ID of the selected input element. But with on(), the event.target.id in selectwill hold the ID of the list of autocomplete items (ui-active-menuitem). With on(), you can access the ID of the input element with event.target.id from the changeand openfunctions.

不同之处在于 on()，内部事件中的事件参数的工作方式不同，持有不同的值。使用 live() 时，select函数中的 event.target.id将保存所选输入元素的 ID。但是对于 on()，select 中的 event.target.id将保存自动完成项目列表的 ID ( ui-active-menuitem)。使用 on()，您可以从change和open函数访问带有 event.target.id 的输入元素的 ID 。