Инженеры и дизайнеры из Китая разработали новое приложение на уровне концепции «Finder», помогающее найти предметы, лежащие не на своём месте. Необходимо только прилепить наклейки радиочастотной идентификации к тем вещам, которые вы обычно теряете (ключи, ручки, зарядка, бумажник, телефон, помада, ребёнок и т.д.) и дать название каждому предмету в специальной программе на вашем смартфоне.
Для поиска наберите название пропавшего предмета, «Finder» подскажет, где он находится относительно вас. Вы словно будете играть в игру «Горячо-холодно».
При вводе данных в поле 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, и ведёт себя корректно.