Реализовываете быстрый поиск по JavaScript?

Question

В основном:

1. У меня есть страница с текстовым полем и список <ul> под ним. <ul> заполняется списком друзей пользователя.

2. Пользователь начинает вводить имя друга в текстовом поле, например, нажимая 'r'

3. Я хочу немедленно обновлять <ul> с каждым нажатием клавиши, чтобы показывать только тех друзей, чьи имена начинаются с R, например, «Ричард, Редмонд, Рахим» и т. Д.

4. По мере того, как пользователь печатает больше, я хочу еще больше ограничить имена, например, если пользователь вводит 'Ri', тогда в списке я хочу только 'Richard'.

Я ищу идеи о том, как реализовать поиск. В частности, если я должен использовать класс Array или JSON для хранения списка друзей, есть ли какое-либо регулярное выражение, которое я должен использовать, и т. Д.

Также какое событие jQuery я должен использовать для прослушивания событий нажатия клавиш?

Answer 1

Рабочий пример: http://jsfiddle.net/peeter/gAAth/

Вот как я бы это сделал, я бы не дублировал данные в массиве.

Оптимизированная версия, предоставленная Raynos: http://jsfiddle.net/gAAth/12/

Answer 2

пример

Другая опция, основанная на коде @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:

содержит селектор

$.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

Я думаю, что немного написано в коде, мне нравится опция сначала спрятать, а затем отобразить.

пример

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