Question

我正在制作一个简单的清单箱过滤器,接收用户的投入,并通过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));
    }
}
});

这一工作相对较好,但随着第1/2号果园的类型而有所减缓,因为有许多物品。

我认为,我可以采用的一种解决办法是,在案文箱中添加一个拖延,使关键活动无法被召到用户停止打字为止。问题在于,我不敢肯定如何这样做,或者说它甚至是一个好的想法。

任何建议/帮助都受到高度赞赏。

Answer 1

你可以这样做:

$( #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米(视需要调整)在主要中点之间穿过搜捕行动,则会给你重新打字的内容留出时间。此外,这还将文件零件中的内容纳入OM(保存编码等)。视项目数目而定,这也可能是体面业绩的提高。

Answer 2

如果上下级指挥系统改变,我就提出以下建议(注一:为了提高业绩和兼容性,放弃了“质量”。有几个改进:

Timer to delay updating the filtered list once half a second has elapsed since the last keypress
List of command texts is pre-cached
Unnecessary use of match replaced with indexOf
Uses fast native DOM manipulation that works in all scriptable browsers since the 1990s

快速测试表明,如果采用5 000种含有短体的备选办法,则在大多数浏览器中,这种减速率在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);
};

友情链接