实现快速Javascript搜索？

基本上：

1. 我有一个带有文本框的页面，下面有一个

   列表。
   由用户的朋友列表填充。

   • 用户开始在文本框中输入朋友的姓名，例如按’r’

   • 我想立即用每个按键更新

     ，只显示名字以R开头的朋友，例如’Richard，Redmond，Raheem’等。

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

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

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

Answer 1

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

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

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

Answer 2

例

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

HTML：

  
 
Rich
 
Rajim
 
Andres
 
Jorge
 
Pedro
 ... 
Raul
 
Paula
 
Delfina
  

CSS：

 li.h {display:none;} 

JS：

containsi选择器

 $.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"); }); 

编辑

我想在编写的代码中有一点，我喜欢首先隐藏然后显示的选项。

例

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