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

前端之家收集整理的这篇文章主要介绍了如何使用.on()绑定jQuery UI自动完成?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对于live()方法,这个问题已经被回答了,但是从jQuery 1.7开始,已经不推荐使用live()方法,而是用.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);
 }
});

但是 – 如果您使用“开放”事件,它将给您我正在寻找的ID – 只是在正确的时间(选择之后需要它).在这一点上,我正在使用解决方法获取open事件函数中的input元素的ID,将其存储在隐藏的字段中,然后在需要它的select方法中访问它.

解决方法

如果我理解正确,您的问题看起来与另一主题中看到的相似.我会使 my answer适应你的情况,让我们看看它是否解决了你的问题:
$(document).on("focus",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.我使用焦点而不是键控,因为我需要重新触发事件,我不知道如何使用键/鼠标事件.

更新:您还可以考虑使用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模板插件,可能会使这个解决方案更容易(尽管我还没有使用过,所以我不能从经验谈话).

猜你在找的jQuery相关文章