修改

Question

我正在使用jQuery UI Autocomplete插件。

一切正常，但我想在最后添加一个方框，说“找到更多结果”。

我正在尝试使用内置的open事件将框附加到已打开的<ul>中，但事件永远不会触发（自动完成列表打开并且功能完全正常，唯一的问题是开放的事件永远不会发生。）

我的代码如下所示：

        $( "#q" ).autocomplete({
            source: function(request, response) {
                var results = $.ui.autocomplete.filter(userFriends, request.term);
                response(results.slice(0, 4));
            },
            minLength: 2,
            appendTo: '.searchbox',
            select: function (event, ui){
                window.location.href = '/u/'+ ui.item.value;
                return false;
            },
            focus: function (event, ui) {
                return false;
            },
            open: function (event, ui){
                console.log("AutoComplete Opened");
            }
        })

        .data('autocomplete')._renderItem = function(ul, item) {
            return $('<li>')
                .data('item.autocomplete', item)
                .append(
                '<a>' +
                    '<div>' +
                    '<div><img src="' + item.img + '" alt="" width="50" onerror="onErrorFixProfileImage(this)"/></div>' +
                    '<div>' + item.label + '</div>' +
                    '</div>' +
                    '</a>'
            )
            .appendTo(ul);
        };

是否有人知道此事件不会触发的原因？

谢谢！

Answer 1

作为测试，您是否尝试在插件初始化之外绑定事件？ E.g：

$( "#q" ).on( "autocompleteopen", function( event, ui ) {
    console.log("AutoComplete Opened");
} );

修改

您可以尝试阻止其他事件中的默认值，而不是返回false：

select: function (event, ui){
    window.location.href = '/u/'+ ui.item.value;
    event.preventDefault();
},
focus: function (event, ui) {
    event.preventDefault();
},

Answer 2

最新更新，我有一个名为jquery.dimensions的插件，它引起了jquery-ui方法的许多问题。删除它解决了问题

Answer 3

我已经测试了添加open方法的简化自动填充功能。它工作正常，消息在控制台中正确写入：

(function(){
    var aTags = ['java', 'javascript', 'actionscript', 'typescript', 'jscript', 'vbscript'];
    $('#tags').autocomplete({
        delay: 50
        , source:aTags
        , select: function(event, data){
            var $p = $('<p></p>').html(data.item.value).css({'display': 'inline-block', 'background-color': '#a0a0a0', 'color': '#ff0000'});
            $(event.target).after($p);
        }
        , open: function (event, ui){
            console.log("AutoComplete Opened");
        }
    });
})()

Demo

jquery ui自动完成打开事件未触发

3 个答案:

修改