3

我正在创建一个简单的列表框过滤器，它接受用户输入并通过 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”事件。问题是，我不知道该怎么做，或者它是否是一个好主意。

非常感谢任何建议/帮助。

4

2 回答 2

6

你可以做这样的延迟：

$('#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 中（仍然保留编码等）。根据项目的数量，这也可能是一个不错的性能提升。

于 2010-05-26T13:57:52.583 回答
2

如果命令下拉菜单没有改变，我建议如下（注意我已经放弃了 jQuery 以获得更好的性能和兼容性）。有几个改进：

  • 自上次按键后半秒后延迟更新过滤列表的计时器
  • 命令文本列表已预先缓存
  • 不必要的使用match替换为indexOf
  • 使用自 1990 年代以来适用于所有可编写脚本的浏览器的快速原生 DOM 操作

一项快速测试表明，对于包含短字符串的 5000 个选项的下拉菜单，它比大多数浏览器中的 jQuery 等价物快 10 到 30 倍。

代码：

var commands = document.getElementById("DatabaseCommandsHidden");
var filteredDropDown = document.getElementById("Listbox1");
var filterInput = document.getElementById("CommandsFilter");
var timer;

// Create a cached list of the lower case text of the commands drop-down
var commandTexts = [], commandText;
for (var i = 0, len = commands.options.length; i < len; ++i) {
    commandText = commands.options[i].text;
    commandTexts.push({original: commandText, lower: commandText.toLowerCase()});
}

function populateFilteredDropDown() {
    timer = null;
    var val = filterInput.value.toLowerCase(), commandText;
    var opts = filteredDropDown.options;
    filteredDropDown.length = 0;
    for (var i = 0, len = commandTexts.length; i < len; ++i) {
        commandText = commandTexts[i];
        if (commandText.lower.indexOf(val) > -1) {
            opts[opts.length] = new Option(commandText.original);
        }
    }
}

filterInput.onkeyup = function() {
    if (timer) {
        window.clearTimeout(timer);
    }
    timer = window.setTimeout(populateFilteredDropDown, 500);
};
于 2010-05-26T14:41:37.550 回答