0

jQuery UI Autocomplete プラグインを使用しています。

すべてが正常に機能していますが、最後に「さらに結果を見つける」というボックスを追加したいと思います。

組み込みopenイベントを使用してボックスを open に追加しようとしています<ul>が、イベントは発生しません (オートコンプリート リストが開き、完全に機能します。唯一の問題は、 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 に答える
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 に答える