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

Question

这个问题是针对 live() 方法回答的，但是 live() 方法在 jQuery 1.7 中已经被弃用并被 .on() 方法取代，这个答案对 on() 不起作用。

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

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

如果您将语法更改为类似

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

来自

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

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

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

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

Answer 1

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

$(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
        });
    }
});

jsFiddle 的工作示例。我使用了focus 而不是keydown，因为我需要重新触发事件，而且我不知道如何使用键/鼠标事件来实现。

更新：您也可以考虑使用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);
});

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

Answer 2

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

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

这适用于 on()：

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

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

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