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