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

Question

live()方法回答了这个问题,但是从jQuery 1.7开始不推荐使用live()方法,并用.on()方法替换,这个答案对on()不起作用.

以下是之前的答案: 使用.live()绑定jQuery UI自动完成

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

如果您将语法更改为类似的

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

从

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

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

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

但是 - 如果您使用"开放"事件,它将为您提供我正在寻找的ID - 只是不在正确的时间(我选择它后需要它).此时,我正在使用一种解决方法,即在open事件函数中获取input元素的ID,将其存储在隐藏字段中,然后在我需要的select方法中访问它.

Answer 1

如果我理解正确,你的问题看起来非常类似于我在另一个主题中看到的问题.我会根据你的情况调整我的答案,让我们看看它是否解决了你的问题:

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

看到更新的小提琴.还有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(),内部事件中的事件参数的工作方式不同,持有不同的值.使用live(),select函数中的event.target.id 将保存所选输入元素的ID.但是使用on(),select中的event.target.id 将保存自动完成项列表的ID(ui-active-menuitem).使用on(),您可以使用更改和打开函数中的event.target.id访问input元素的ID .