我有一个自动完成组合框，在数据库中有10,000条记录。当我试图键入APD时，它会发生..甚至应用程序都无法正常工作。并显示如下错误
由于长时间运行的脚本，本地主机无法响应。
如果我键入9999或243或2345，那么它就会没有任何问题......
请找到我的下拉值。
APD0000000001
APD0000000002
APD0000000003
.
.
.
APD0000009999
APD0000010000
自动完成代码：
function ($) {
$.widget("custom.combobox", {
_create: function () {
this.wrapper = $("<span>")
.addClass("custom-combobox")
.insertAfter(this.element);
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function () {
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete({
delay: 0,
minLength: 2,
source: $.proxy(this, "_source")
}).focus(function () { $(this).autocomplete("search"); })
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on(this.input, {
autocompleteselect: function (event, ui) {
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function () {
var input = this.input,
wasOpen = false;
$("<a>")
.attr("tabIndex", -1)
//.attr("title", "Show All Items")
.tooltip()
.appendTo(this.wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("custom-combobox-toggle ui-corner-right")
.mousedown(function () {
wasOpen = input.autocomplete("widget").is(":visible");
})
.click(function () {
input.focus();
// Close if already visible
if (wasOpen) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
});
},
_source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(this.element.children("option").map(function () {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text,
value: text,
option: this
};
}));
},
_removeIfInvalid: function (event, ui) {
// Selected an item, nothing to do
if (ui.item) {
return;
}
// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children("option").each(function () {
if ($(this).text().toLowerCase() === valueLowerCase) {
this.selected = valid = true;
return false;
}
});
// Found a match, nothing to do
if (valid) {
return;
}
// Remove invalid value
this.input.val("")
//.attr( "title", value + " didn't match any item" )
//.tooltip( "open" );
this.element.val("");
this._delay(function () {
this.input.tooltip("close").attr("title", "");
}, 2500);
//this.input.autocomplete( "instance" ).term = "";
},
_destroy: function () {
this.wrapper.remove();
this.element.show();
}
});
})(jQuery);
组合框代码
function Speed() {
(function ($) {
$.widget("ui.combobox", $.ui.autocomplete,
{
options: {
/* override default values here */
minLength: 2,
style: width = 500,
/* 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");
// input.addClass("ui-widget ui-widget-content ui-corner-left");
this.button = $("<button type='button' > </button>")
.attr("tabIndex", 1)
.attr("title", "Show All Items")
.attr("width", "50px")
.insertAfter(input)
.removeClass("ui-corner-all")
// .addClass("ui-corner-right ui-button-icon")
.addClass("ui-comboboxstyle")
.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. 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("");
}
}
}
$.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 = $("<select>").insertAfter(select)
// .val(value).combobox(this.options);;
this.input = $("<input>").insertAfter(select)
.val(value).combobox(this.options);
}
}
);
})(jQuery);
}