Как я мог это сделать? Уточняйте результаты поиска по мере ввода

У меня есть страница с кучей миниатюр и заголовков:

http://thenozzle.net/games
(неработающей ссылке)

Если вы нажмете "поиск", панель поиска опустится сверху вниз. Я могу напечатать вещи в поле поиска и нажать Enter, чтобы найти на сайте. Мне было интересно, есть ли способ просмотреть все миниатюры, и если бы я набрал "E", он бы скрыл все миниатюры, кроме тех, которые начинались с "E". Затем я набрал "Эль", и он поднял все результаты, которые начинались с "Эль". Затем я добавил "d", и он отобразил бы каждый эскиз с заголовком, начинающимся с "Eld". При этом пользователи могут легко находить страницу с играми без перезагрузки. Является ли это возможным? Стоит делать?

Я хорошо разбираюсь в jQuery и PHP. Если бы мое объяснение не сделало это. Посмотрите в Google Instant.

Спасибо!

Источник

2 ответа

Решение

Я сделал что-то подобное некоторое время назад. Вот ссылка.

Он запускает это событие при каждом нажатии клавиши и сопоставляет нажатую клавишу с li это содержит это. Он прекрасно работает, но определенно может использовать некоторые модификации. Вот код:

$("#search").keyup(function(){
    $("li").hide();
   var term = $(this).val();
    $("li:contains('" + term + "')").show();
});
Источник

По сути, у вас есть код JS (с jquery), который выполняет вызовы json для получения списка совпадений со строкой, уже набранной по ходу. Он должен показывать их в div рядом с полем ввода, обновляющим innerHTML или что-то в этом роде.

Ниже приведен скрипт / сервлет / сервис, который можно вызывать каждый раз при вводе.

Пример: http://woorkup.com/2010/09/13/how-to-create-your-own-instant-search/

Источник
Другие вопросы по тегам