Red Spirit

Блог Алексея Таянчина

RSS 2.0

Поиск с выводом мгновенных результатов на jQuery

Всем знакома такая удобная вещь в поисковиках, когда вводишь запрос, ниже появляется список из частых запросов для подстановки, типа автокомплит. Я взял эту идею себе и немного переиначил.

Вот задача, которую мне надо было решить: замутить на сайте-галерее поиск, который при введении запроса ниже высвечивал список подходящих результатов. То есть будет показываться список не популярных запросов, а список с результатами в виде заголовков страниц кликнув по которым сразу же перемещаемся на нужную страницу.

Такое решение дает нам ряд неоспоримых преимуществ: во-первый, это мощное юзабилити для пользователя, во-вторых, это экономия пространства, можно отказаться от отдельной страницы с результатами поиска. Насчет отдельной страницы поиска, отказываться от нее или нет будет зависеть от самого сайта и нужно ли пользователю предоставлять возможность сложного поиска с дополнительными параметрами. А для галереи для поиска картинок и альбомов это очень оправданное решение.

Быстрый поиск по сайту

И так, концепция такова:

  1. Как только пользователь вводит в поле ввода запроса (Input) более двух символов, то этот запрос аяксом отправляется на сервер.
  2. На сервере происходит выборка из базы по шаблону по одному или нескольким полям.
  3. Если результатов более одного и менее 11, то они сериализуются в строку, которая возвращается в виде результата аякс запроса, иначе возвращается пустая строка.
  4. Получив строку с результатами десериализуем её в массив, а этот массив в цикле превращаем в набор тэгов, которые формируют и отображают список этих самых результатов.

На картинке видно, что по запросу “girl” высветилось еще две строчки, где нет вхождения фразы “girl”, это произошло потому что поиск ведется по двум полям (имя и описание), а высвечивается только значения поля имени, значит поисковая фраза встретилась в описании.

Собственно, начинаем конструировать.

HTML каркас:

Тут вообще просто: Input для ввода запроса и ниже блок для отображения результатов.

Обрамляем это CSS стилями:

Естественно, что изначально блок с результатами должен быть скрытым, так же его позиционируем, а все остальное это украшательства.

JavaScript для работы клиентской части. Можно было бы его этот код сделать в виде jQuery-плагина, но пошел по простому пути и оформил в обычный отдельный js:

Надо обратить внимание на десериализацию, это то, как полученная строка преобразуется в массив, для этого используется метод split строковой переменной. Получив строку, типа: Caption_1$$ID_1$$Caption_2$$ID_2…, где Caption – это заголовок страницы, а ID – номер для подстановки в URL, чтобы к ней перейти, разбиваем её (строку) на элементы массива указывая, что разделителем служит двойной доллар.
Еще при необходимости можно заменить селекторы на свои, путь до скрипта и урлы на найденные страницы свои. В моем случае переход производится на альбомы с адресом /album-ID, где ID – это номер.

И остался серверный скрипт на PHP:

Тут у меня выборка происходит по двум полям с помощью оператора LIKE. Да, признаю, не самое оптимальное решение, но зато самое простое и для небольшой базы (несколько тысяч записей, как у меня) это более чем оправдано.

Почему выводим результат только при нахождении от 1 до 10 подходящих записей? Потому что ноль – это вообще ничего не найдено, а более 10, по моему мнению, это слишком много для вывода, в пределах 10 мы получаем вполне себе релевантные результаты, их и можно показывать пользователю.

Пожалуй всё. Скачать файлы с исходниками можно тут.

Отдельную демку решил не делать, все вышеописанное в полной мере реализовано на сайте анимеаватарки.рф сразу на главной странице.

  • falstaf

    не могу удержаться от вопроса. =) чем не устроил jquery.autocomplete?

  • http://redspirit.ru Red Spirit

    Хз, не знал. Появилась задача – я её решил своими силами.

  • Pssnet

    В этом примере снижена нагрузка на серв. Отличный приме

  • Igoresz

    Строка поиска кирилицей выводит utf зябры. На сайте та же ошибка. Почему не исправляете?

  • http://redspirit.ru Red Spirit

    Надо просто все перевести в UTF-8 кодировку. И БД и кодировку скриптов и HTML страничку.

  • йцу

    ебаная чмошина автор хоть бы sql выложл хуисос

  • Вано

    А если на сайте по 1000 чел в день, они вашу пазу разорвут пополам :)))