jQuery UI 自动完成组合框对于大型选择列表非常慢 [英] jQuery UI Autocomplete Combobox Very Slow With Large Select Lists
问题描述
我使用的是 jQuery UI 自动完成组合框的修改版本，如下所示:http://jqueryui.com/demos/autocomplete/#combobox
I'm using a modified version of the jQuery UI Autocomplete Combobox, as seen here: http://jqueryui.com/demos/autocomplete/#combobox
为了这个问题，假设我有那个代码^^^
打开组合框时，无论是通过单击按钮还是专注于组合框文本输入，在显示项目列表之前都有很大的延迟.This delay gets noticeably larger when the select list has more options.
When opening the combobox, either by clicking the button or focusing on the comboboxs text input, there is a large delay before showing the list of items. This delay gets noticeably larger when the select list has more options.
这种延迟不只是第一次发生，每次都会发生.
This delay doesn't just occur the first time either, it happens every time.
由于这个项目的一些选择列表非常大(数百个项目)，延迟/浏览器冻结是不可接受的.
As some of the select lists on this project are very large (hundreds and hundreds of items), the delay/browser freezing up is unacceptable.
谁能指出我正确的方向来优化它?甚至性能问题可能出在哪里?
我认为问题可能与脚本显示完整项目列表的方式有关(是否自动完成搜索空字符串)，是否有另一种方式来显示所有项目?也许我可以构建一个一次性案例来显示所有不进行所有正则表达式匹配的项目(因为在开始输入之前打开列表是很常见的)?
I believe the issue may be to do with the way the script shows the full list of items (does an autocomplete search for an empty string), is there another way to display all items? Perhaps I could build a one off case for displaying all items (as it is common to open the list before starting to type) that doesn't do all the regex matching?
这是一个摆弄的jsfiddle:http://jsfiddle.net/9TaMu/
Here is a jsfiddle to fiddle with: http://jsfiddle.net/9TaMu/
推荐答案
使用当前的组合框实现，每次展开下拉列表时都会清空并重新呈现完整列表.您还坚持将 minLength 设置为 0，因为它必须执行空搜索才能获取完整列表.
With the current combobox implementation, the full list is emptied and re-rendered every time you expand the dropdown. Also you are stuck with setting the minLength to 0, because it has to do an empty search to get the full list.
这是我自己的扩展自动完成小部件的实现.在我的测试中，即使在 IE 7 和 8 上，它也可以非常流畅地处理 5000 个项目的列表.它只呈现一次完整列表，并在单击下拉按钮时重新使用它.这也消除了选项 minLength = 0 的依赖性.它也适用于数组和 ajax 作为列表源.此外，如果您有多个大列表，小部件初始化将添加到队列中，以便它可以在后台运行，而不会冻结浏览器.
Here is my own implementation extending the autocomplete widget. In my tests it can handle lists of 5000 items pretty smoothly even on IE 7 and 8. It renders the full list just once, and reuses it whenever the dropdown button is clicked. This also removes the dependence of the option minLength = 0. It also works with arrays, and ajax as list source. Also if you have multiple large list, the widget initialization is added to a queue so it can run in the background, and not freeze the browser.
<script>
(function($){
$.widget( "ui.combobox", $.ui.autocomplete,
{
options: {
/* override default values here */
minLength: 2,
/* the argument to pass to ajax to get the complete list */
ajaxGetAll: {get: "all"}
},
_create: function(){
if (this.element.is("SELECT")){
this._selectInit();
return;
}
$.ui.autocomplete.prototype._create.call(this);
var input = this.element;
input.addClass( "ui-widget ui-widget-content ui-corner-left" );
this.button = $( "<button type='button'> </button>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.insertAfter( input )
.button({
icons: { primary: "ui-icon-triangle-1-s" },
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-button-icon" )
.click(function(event) {
// close if already visible
if ( input.combobox( "widget" ).is( ":visible" ) ) {
input.combobox( "close" );
return;
}
// when user clicks the show all button, we display the cached full menu
var data = input.data("combobox");
clearTimeout( data.closing );
if (!input.isFullMenu){
data._swapMenu();
input.isFullMenu = true;
}
/* input/select that are initially hidden (display=none, i.e. second level menus),
will not have position cordinates until they are visible. */
input.combobox( "widget" ).css( "display", "block" )
.position($.extend({ of: input },
data.options.position
));
input.focus();
data._trigger( "open" );
});
/* to better handle large lists, put in a queue and process sequentially */
$(document).queue(function(){
var data = input.data("combobox");
if ($.isArray(data.options.source)){
$.ui.combobox.prototype._renderFullMenu.call(data, data.options.source);
}else if (typeof data.options.source === "string") {
$.getJSON(data.options.source, data.options.ajaxGetAll , function(source){
$.ui.combobox.prototype._renderFullMenu.call(data, source);
});
}else {
$.ui.combobox.prototype._renderFullMenu.call(data, data.source());
}
});
},
/* initialize the full list of items, this menu will be reused whenever the user clicks the show all button */
_renderFullMenu: function(source){
var self = this,
input = this.element,
ul = input.data( "combobox" ).menu.element,
lis = [];
source = this._normalize(source);
input.data( "combobox" ).menuAll = input.data( "combobox" ).menu.element.clone(true).appendTo("body");
for(var i=0; i<source.length; i++){
lis[i] = "<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">"+source[i].label+"</a></li>";
}
ul.append(lis.join(""));
this._resizeMenu();
// setup the rest of the data, and event stuff
setTimeout(function(){
self._setupMenuItem.call(self, ul.children("li"), source );
}, 0);
input.isFullMenu = true;
},
/* incrementally setup the menu items, so the browser can remains responsive when processing thousands of items */
_setupMenuItem: function( items, source ){
var self = this,
itemsChunk = items.splice(0, 500),
sourceChunk = source.splice(0, 500);
for(var i=0; i<itemsChunk.length; i++){
$(itemsChunk[i])
.data( "item.autocomplete", sourceChunk[i])
.mouseenter(function( event ) {
self.menu.activate( event, $(this));
})
.mouseleave(function() {
self.menu.deactivate();
});
}
if (items.length > 0){
setTimeout(function(){
self._setupMenuItem.call(self, items, source );
}, 0);
}else { // renderFullMenu for the next combobox.
$(document).dequeue();
}
},
/* overwrite. make the matching string bold */
_renderItem: function( ul, item ) {
var label = item.label.replace( new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>" );
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + label + "</a>" )
.appendTo( ul );
},
/* overwrite. to cleanup additional stuff that was added */
destroy: function() {
if (this.element.is("SELECT")){
this.input.remove();
this.element.removeData().show();
return;
}
// super()
$.ui.autocomplete.prototype.destroy.call(this);
// clean up new stuff
this.element.removeClass( "ui-widget ui-widget-content ui-corner-left" );
this.button.remove();
},
/* overwrite. to swap out and preserve the full menu */
search: function( value, event){
var input = this.element;
if (input.isFullMenu){
this._swapMenu();
input.isFullMenu = false;
}
// super()
$.ui.autocomplete.prototype.search.call(this, value, event);
},
_change: function( event ){
abc = this;
if ( !this.selectedItem ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( this.element.val() ) + "$", "i" ),
match = $.grep( this.options.source, function(value) {
return matcher.test( value.label );
});
if (match.length){
match[0].option.selected = true;
}else {
// remove invalid value, as it didn't match anything
this.element.val( "" );
if (this.options.selectElement) {
this.options.selectElement.val( "" );
}
}
}
// super()
$.ui.autocomplete.prototype._change.call(this, event);
},
_swapMenu: function(){
var input = this.element,
data = input.data("combobox"),
tmp = data.menuAll;
data.menuAll = data.menu.element.hide();
data.menu.element = tmp;
},
/* build the source array from the options of the select element */
_selectInit: function(){
var select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
this.options.source = select.children( "option[value!='']" ).map(function() {
return { label: $.trim(this.text), option: this };
}).toArray();
var userSelectCallback = this.options.select;
var userSelectedCallback = this.options.selected;
this.options.select = function(event, ui){
ui.item.option.selected = true;
if (userSelectCallback) userSelectCallback(event, ui);
// compatibility with jQuery UI's combobox.
if (userSelectedCallback) userSelectedCallback(event, ui);
};
this.options.selectElement = select;
this.input = $( "<input>" ).insertAfter( select )
.val( value ).combobox(this.options);
}
}
);
})(jQuery);
</script>
这篇关于jQuery UI 自动完成组合框对于大型选择列表非常慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
