如何使用.on()绑定jQuery UI自动完成功能? [英] How do you bind jQuery UI autocomplete using .on()?

问题描述

为live()方法回答了这个问题，但是从jQuery 1.7开始不推荐使用live()方法，而是将其替换为.on()方法，并且此答案不适用于on().

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()绑定jQuery UI自动完成

有人知道如何使用on()做同一件事吗?

Anyone know how to do the same thing with on()?

如果将语法更改为

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

来自

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

这是可行的方法，但是它以一种怪异的方式与内部自动完成事件交互.通过live()，如果您使用 select 事件并访问event.target，它将为您提供输入元素的ID.如果使用on()，它将为您提供下拉菜单"ui-active-menuitem"的ID.像这样:

It kind of works, but it interacts with the internal autocomplete events in a weird way. With live(), if you use the select event 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:

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

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

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.

推荐答案

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

If I understood correctly, your problem looks very similar to one I saw in another topic. I'll adapt my answer to 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
        });
    }
});

jsFiddle 上的工作示例.我使用focus而不是keydown，因为我需要重新触发该事件，而且我不知道该如何处理键/鼠标事件.

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

更新:如果出现以下情况，您也可以考虑使用 clone 您的其他输入将具有与现有输入相同的自动完成功能:

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

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模板插件可以使该解决方案更容易(尽管我自己还没有使用过，所以我不能凭经验谈谈).

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).

这篇关于如何使用.on()绑定jQuery UI自动完成功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！