Реализация поиска и показа значения наподобие автодополнения.

Например необходимо реализовать поиск строчек стихотворения, в котором есть введенное слово или его часть.

Если введем слово в списке должны отобразиться только те строчки в которых присутствуют данное слово. И все это по мере ввода искомого слова.

Создадим поле для ввода текста и сам список полей в которых необходимо искать информацию или данные в режиме реального времени этакий автопоиск:

Text
 ... 
Text 

Добавим для наглядности css:

input, select {
width: 300px;
margin: 10px auto;
display: block;
}

При вводе данных в поле input всё, что не совпадает со строкой поиска, будем скрывать, оставляя в списке только нужные результаты.

Поиск в списке основывается на использовании регулярных выражений, а так как значение в поле ввода не постоянно, лучше использовать объектную запись регулярных выражений RegExp() вместо литеральной:

var field = $('#list').find('option');

// собственно поиск
$('#searching').bind('keyup', function() {
    var q = new RegExp($(this).val(), 'ig'),
        bol = true;

    for (var i = 0, l = field.length; i < l; i += 1) {
        var option = $(field[i]),
            parent = option.parent();

        if ($(field[i]).text().match(q)) {
            if (parent.is('span')) {
                option.show();
                parent.replaceWith(option);
            }
        } else {
            if (option.is('option') && (!parent.is('span'))) {
                option.wrap('').hide() } } } }); 

Видно, что непосредственно поиск не представляет ничего сложного: весь интерес в отображении найденных результатов. Дело в том, что простое применение свойств, скрывающих элементы списка, невсегда приводит к ожидаемому результату. Например, в некоторых браузерах (Chrome, Internet Explorer) если просто добавить display:none к тегу option, последний всё равно останется видимым.

Однако этот же тег option, обернутый тегом span, понимает display:none, и ведёт себя корректно.