我正在创建一个简单的列表框过滤器,它接受用户输入并通过 javascript/jquery 将匹配结果返回到列表框中(列表框中大约有 5000 多个项目)。这是代码片段:
var Listbox1 = $('#Listbox1');
var commands = document.getElementById('DatabaseCommandsHidden'); //using js for speed
$('#CommandsFilter').bind('keyup', function() {
Listbox1.children().remove();
for (var i = 0; i < commands.options.length; i++) {
if (commands.options[i].text.toLowerCase().match($(this).val().toLowerCase())) {
Listbox1.append($('<option></option>').val(i).html(commands.options[i].text));
}
}
});
这工作得很好,但是当输入第一个/第二个字符时速度会变慢,因为有太多的项目。
我认为我可以使用的解决方案是向文本框添加延迟,以防止在用户停止输入之前调用“keyup”事件。问题是,我不确定该怎么做,或者它是否是个好主意。
非常感谢任何建议/帮助。
最佳答案
你可以像这样延迟:
$('#CommandsFilter').keyup(function() {
clearTimeout($.data(this, 'timer'));
var wait = setTimeout(search, 500);
$(this).data('timer', wait);
});
function search() {
var temp = $("<select />");
for (var i = 0; i < commands.options.length; i++) {
if (commands.options[i].text.toLowerCase().match($(this).val().toLowerCase())) {
$('<option></option>', { val: i, html: commands.options[i].text }).appendTo(temp);
}
}
Listbox1.empty().append(temp.children());
}
这会在您输入的元素上存储一个超时时间,如果在击键之间经过 500 毫秒(根据需要调整),则会执行搜索。此外,这会将文档片段中的元素附加到 DOM 中(仍然保留编码等)。根据项目的数量,这也可能是一个不错的性能提升。
关于javascript - 如何使用 setTimeout/.delay() 等待字符之间的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2913486/