0

我正在使用 jQuery UI 自动完成插件。

一切正常，但我想在最后添加一个框，上面写着“查找更多结果”。

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

我的代码如下所示：

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

有谁知道这个事件不会触发的原因？

谢谢！

4

3 回答 3

1

作为测试，您是否尝试过在插件初始化之外绑定事件？例如：

$( "#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();
},
于 2012-11-27T10:42:01.107 回答
1

更新较晚，我安装了一个名为 jquery.dimensions 的插件，它导致 jquery-ui 方法出现许多问题。删除它解决了问题

于 2013-04-08T09:58:40.703 回答
0

我已经测试了一个简化的自动完成添加你的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");
        }
    });
})()​

演示。

于 2012-11-27T10:52:52.317 回答