Ниже пойдёт речь о методе поиска по выпадающему списку (select).
Для этого требуется поле ввода текста и собственно сам выпадающий список:
Чтобы результат поиска был нагляднее для пользователя, стоит задать тегу select атрибут size со значением 10.
Добавим к этому немного css:
При вводе данных в поле input всё, что не совпадает со строкой поиска, будем скрывать, оставляя в списке только нужные результаты.
Поиск в списке основывается на использовании регулярных выражений, а так как значение в поле ввода — штука не постоянная, я использую объектную запись регулярных выражений (new RegExp()) вместо литеральной:
Видно, что непосредственно поиск не представляет ничего сложного: весь интерес в отображении найденных результатов.
Дело в том, что простое применение свойств, скрывающих элементы списка, невсегда приводит к ожидаемому результату.
Например, в некоторых браузерах (Chrome, Internet Explorer) если просто добавить display:none к тегу option, последний всё равно останется видимым.
Однакопростой финт ушами этот же тег option, обёрнутый тегом span, прекрасно понимает display: none, и ведёт себя именно так, как ожидается.
P.S.: Такой метод не является ни валидным, ни семантичным, однако он отлично работает во всех браузерах.
Пример.
Для этого требуется поле ввода текста и собственно сам выпадающий список:
<input class="type-search" type="text" />
<select size="10" id="list">
<option value="val">Text</option>
...
<option value="val*n">Text</option>
</select>
Чтобы результат поиска был нагляднее для пользователя, стоит задать тегу select атрибут size со значением 10.
Добавим к этому немного css:
input, select {
width: 300px;
margin: 10px auto;
display: block;
}
При вводе данных в поле input всё, что не совпадает со строкой поиска, будем скрывать, оставляя в списке только нужные результаты.
Поиск в списке основывается на использовании регулярных выражений, а так как значение в поле ввода — штука не постоянная, я использую объектную запись регулярных выражений (new RegExp()) вместо литеральной:
var field = $('#list').find('option');
// собственно поиск
$('#searchInput').bind('keyup', function() {
var q = new RegExp($(this).val(), 'ig');
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('<span>').hide();
}
}
}
});
Видно, что непосредственно поиск не представляет ничего сложного: весь интерес в отображении найденных результатов.
Дело в том, что простое применение свойств, скрывающих элементы списка, невсегда приводит к ожидаемому результату.
Например, в некоторых браузерах (Chrome, Internet Explorer) если просто добавить display:none к тегу option, последний всё равно останется видимым.
Однако
P.S.: Такой метод не является ни валидным, ни семантичным, однако он отлично работает во всех браузерах.
Пример.