Implementing a Fast Javascript Search?

Question

Basically:

1. I have a page with a textbox, and a <ul> list below it. The <ul> is populated by a list of the user's friends.

2. The user begins typing in the name of a friend in the textbox, e.g pressing 'r'

3. I want to immediately update the <ul> with each keypress to show only those friends whose names begin with R, e.g 'Richard, Redmond, Raheem', etc.

4. As the user types more, I want to further restrict the names, e.g if user types 'Ri' then I only want 'Richard' in the list.

I'm looking for ideas on how to implement the searching. Specifically, if I should use an Array or JSON class for storing the list of friends, if there's any regular expression I should use, etc?

Also which jQuery event should I use for listening to the keypress events?

Answer 1

Working example: http://jsfiddle.net/peeter/gAAth/

This is how I'd do it, I wouldn't duplicate data in an array.

An optimized version provide by Raynos: http://jsfiddle.net/gAAth/12/

Answer 2

example

Another option based on the @Peeter code .

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

EDIT

I think a little in the code written, I like the option to hide first and then display.

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