实现快速 Javascript 搜索？答案

【问题标题】：Implementing a Fast Javascript Search?实现快速 Javascript 搜索？
【发布时间】：2011-04-16 14:56:13
【问题描述】：

基本上：

我有一个带有文本框的页面，下面有一个<ul> 列表。 <ul> 由用户的朋友列表填充。
用户开始在文本框中输入朋友的名字，例如按“r”
我想在每次按键时立即更新 <ul>，以仅显示名字以 R 开头的朋友，例如“Richard、Redmond、Raheem”等。
随着用户键入更多，我想进一步限制名称，例如，如果用户键入“Ri”，那么我只希望列表中出现“Richard”。

我正在寻找有关如何实现搜索的想法。具体来说，如果我应该使用 Array 或 JSON 类来存储朋友列表，是否应该使用任何正则表达式等？

我应该使用哪个 jQuery 事件来监听按键事件？

【问题讨论】：

标签： javascript jquery search

【解决方案1】：

工作示例：http://jsfiddle.net/peeter/gAAth/

我就是这样做的，我不会在数组中复制数据。

Raynos 提供的优化版本：http://jsfiddle.net/gAAth/12/

【讨论】：

我可以想象，如果您有一个相当长的列表（在每个 keypress 上调用 map？），这不是一个好方法。但这需要先进行测试...
如果用户的朋友的名字必须在 javascript 中硬编码，你能改变它来展示如何实现吗？
现在它与 UI 的耦合太紧密了，如果我想将名称从 <ul> 转移到表格中，或者将名称放在超链接中，它会破坏这段代码。将名称外部放在 javascript 中似乎更好。 javascript 还负责首先填充<ul>。
任何提示为什么这在 IE 中不起作用？我想可能有一个简单的解决方法。
当您使用大写字母进行搜索时，搜索不起作用：工作示例可能在您的搜索字段中使用大写字母并且可以从多个列表中进行搜索：jsfiddle.net/Proz0r/Ks48H

【解决方案2】：

example

基于@Peeter 代码的另一个选项。

HTML：

<input type="text" id="input1"/>
<ul id="list">
    <li>Rich</li>
    <li>Rajim</li>
    <li>Andres</li>
    <li>Jorge</li>
    <li>Pedro</li>
    ...
    <li>Raul</li>
    <li>Paula</li>
    <li>Delfina</li>
</ul>

CSS：

li.h {display:none;}

JS：

containsi selector

$.extend($.expr[':'], {
  'containsi': function(elem, i, match, array)
  {
    return (elem.textContent || elem.innerText || '').toLowerCase()
    .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

// first option    
$("#input1").keyup(function() {
    var search = $(this).val().toLowerCase();
     $._list = ($._list) ? $._list : $("#list li"); //cache
     $._list
        .removeClass("h")
        .filter(":not(:containsi('"+search+"'))").addClass("h");
});

编辑

我觉得在写的代码中，我喜欢先隐藏再显示的选项。

example

JS：

// second option
$("#input1").keyup(function() {
    var search = $(this).val().toLowerCase();
    $._list = ($._list) ? $._list : $("#list li");
    $._list
        .addClass(function(index, currentClass) {
            var addedClass;
            if (currentClass !== "h" )
                addedClass = "h";
            return addedClass;
        }).filter(":containsi('"+search+"')").removeClass("h");
});

// third opcion
$("#input1").keyup(function() {
    var search = $(this).val().toLowerCase();
    $._list = ($._list) ? $._list : $("#list li");
    $._list
        .hide()
        .filter(":containsi('"+search+"')").show();
});

【讨论】：

您能否概述一下您的答案与另一个答案之间的区别？人们不应该为了获得这样的基本信息而必须详细阅读这两本书。