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 );
};
私が達成しようとしている最終結果は、リスト項目をクリックするとそのオプションが選択され、要素内のボタンをクリックすると、その選択の情報パネルが表示されることです。(その部分は完了しており、関係ありません。)
autocompleteselect
カスタムselect
ハンドラーを定義しない限り、オートコンプリート ウィジェットはイベントに応答しません。カスタムselect
メソッドを削除すると、ウィジェットは何もしません。カスタム ハンドラーを定義して入力の値を設定し、提案リストを閉じることはできますが、既定のハンドラーが起動しない理由がわかりません。
イベントのトリガーに成功autocomplete
し、デフォルトのハンドラーが応答することに成功した人はいますか? なぜこれが期待どおりに機能しない(または機能しない)のか、誰かが知っていますか?
フィドルは jQuery 1.9.1 と UI 1.9.2 を使用しています。ローカルでは jQuery 1.9.1 と UI 1.10.3 を使用しています。環境間の動作に違いはありません。