实现快速Javascript搜索？

Question

基本上：

1. 我有一个带有文本框的页面，下面有一个<ul>列表。 <ul>由用户的朋友列表填充。

2. 用户开始在文本框中输入朋友的名字，例如按'r'

3. 我想立即用每个按键更新<ul>，只显示名字以R开头的朋友，例如'Richard，Redmond，Raheem'等。

4. 当用户输入更多内容时，我想进一步限制名称，例如，如果用户输入'Ri'，那么我只需要列表中的'Richard'。

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

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

Answer 1

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

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

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

Answer 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();
});