1

我有一个使用 jQuery Autocomplete 设置的自定义渲染解决方案。

// save a reference to the widget itself to override methods
var widget = $('#ui-search').on('autocompleteselect', function(e) {
    console.log('I am tracking the events from OUTSIDE');
}).autocomplete({
    /***** REMOVE THIS and 'autocompleteselect' does nothing *****/
    select: function(ui, item) {
        console.warn('I am tracking this from INSIDE');  
    },
    /***** *****/
    source: projects

}).data('ui-autocomplete');

// bind clicks on the autocomplete list to trigger the 'select' event
$('.ui-autocomplete').on('click', 'li', function(e) {
    var item = $(this).data('ui-autocomplete-item');
    // use the widget's internal trigger method for generating the right kinds of events
    widget._trigger('select', $.Event('autocompleteselect'), item);
})

// this is the custom rendering method and is only relevant in that it does not include an anchor tag
widget._renderItem = function( ul, item ) {
    return $( "<li>" ).data('ui-autocomplete-item', item).html(item.label + "<br>" + item.desc).appendTo( ul );
};

JSFiddle 上的现场演示

我试图实现的最终结果是单击列表项将选择该选项，而单击元素内的按钮将显示该选择的信息面板。（该部分已完成且不相关。）

autocompleteselect除非我定义了自定义处理程序，否则自动完成小部件不会响应事件select。如果我删除自定义select方法，小部件什么也不做。我可以定义一个自定义处理程序来设置输入的值并关闭建议列表，但我无法弄清楚为什么默认处理程序不会触发。

有没有人成功触发autocomplete事件并让默认处理程序响应？有谁知道为什么这不（或可能不应该）按我期望的方式工作？

小提琴使用 jQuery 1.9.1 和 UI 1.9.2；在本地，我使用的是 jQuery 1.9.1 和 UI 1.10.3。环境之间的行为没有差异。

4

0 回答 0