JQuery オートコンプリート UI ウィジェットをテストしたところ、IE で大量のデータを処理する場合、オートコンプリートのパフォーマンスが非常に低いことがわかりました。クライアントは Internet Explorer 7 を使用しています。
パフォーマンスの問題を軽減する解決策を見つけました。オートコンプリート検索のすべての一致を返す代わりに、最初の 40 件の一致のみを返します。以下のコード
source: function (request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
var select_el = select.get(0); // get dom element
var rep = new Array(); // response array
var maxRepSize = 40; // maximum response size
// simple loop for the options
var looper = 0;
for (var i = 0; i < select_el.length; i++) {
var text = select_el.options[i].text;
if (!request || request == '') {
// add element to result array
rep[looper++] = {
label: text,
value: text,
option: select_el.options[i]
};
}
else if ( select_el.options[i].value && matcher.test(text) ) {
// add element to result array
rep[looper++] = {
label: text,
value: text,
option: select_el.options[i]
};
}
if ( rep.length > maxRepSize ) {
needMoreItems = true;
break;
}
}
// send response
response( rep );
},
クライアントから、オートコンプリート リストに「その他の結果」項目を追加するように依頼されました。検索に一致する項目が 40 を超える場合、「その他の結果」項目がリストの一番下に表示されます。ユーザーが [その他の結果] 項目をクリックすると、オートコンプリート ドロップダウンが展開され、次の 40 件の一致が含まれます。jQuery オートコンプリートを試してみたところ、自動提案リストに次の 40 項目を入力できましたが、ユーザーが動的に追加された項目の 1 つをクリックしたときに、クリック イベントをオートコンプリート UI ウィジェットの選択イベントにバインドできませんでした。 . 以下のコード:
open: function( event, ui ) {
if (needMoreItems) {
needMoreItems = false;
$('<li class="ui-menu-item" role="menuitem" id="yoADDMORE" ><a class="ui-corner-all" tabindex="-1">... more available<br/><br/></a></li>')
.bind({
click: function(e) {
var appendHtml = '';
var select_el = select.get(0);
var maxRepSize = 40; // maximum response size
// simple loop for the options
var looper = 0;
for (var i = 41; i < select_el.length; i++) {
appendHtml += '<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">' + select_el.options[i].text + '</a></li>';
if ( looper ++ > maxRepSize ) {
needMoreItems = true;
break;
}
}
if (needMoreItems)
appendHtml += '<li class="ui-menu-item" role="menuitem" id="yoADDMORE" ><a class="ui-corner-all" tabindex="-1">... more available<br/><br/></a></li>';
$('#yoADDMORE').remove();
$('ul.ui-autocomplete').html($('ul.ui-autocomplete').html() + appendHtml);
$('ul.ui-autocomplete > li')
.bind({
mouseenter: function(e) {
// Hover event handler
$("> a",this).attr('class','ui-corner-all ui-state-hover');
},
mouseleave: function(e) {
// Hover event handler
$("> a",this).attr('class','ui-corner-all');
}
});
},
mouseenter: function(e) {
// Hover event handler
$("> a",this).attr('class','ui-corner-all ui-state-hover');
},
mouseleave: function(e) {
// Hover event handler
$("> a",this).attr('class','ui-corner-all');
}
})
.appendTo('ul.ui-autocomplete');
}
},
jsFiddle へのリンク http://jsfiddle.net/eyecode/sX4Ba/ 助けていただければ幸いです。
前もって感謝します