Autosuggest

    Autosuggest или автозаполнение полей форм — отличное средство для облегчения работы клиентов при поиске или вбивании однотипных или повторяющихся данных в формы. Введённый в широкие массы благодаря Google suggest, эта техника быстра нашла поддержку среди web-разработчиков и добавила проблем тем кто отвечает за стабильность и архитектуру инфосистем во многом из-за увеличившийся в разы нагрузке на полнотекстовый поиск по базе данных. В данной статье я рассматриваю готовое решение от BrandSpankingNew, которое вероятно многие уже могли видеть на том же iconfinder.net, а теперь и на aleria.net.BSN Autosuggest 2.1.3 представляет из себя лишь набор css, изображений и js-обработчика. Установка очень простая. Необходимое input-поле обязательно должно иметь id параметр. После этого подгружается js и css. В самом конце создаётся инициализирующий объект, который в свою очередь привязывает к полю event-ы и занимается всей работой по получению сформированного ответа на запрос поиска.Инициализирующий объект с настройками: var suggest = new bsn.AutoSuggest('search_input', {
    script:"search.php?",
    varname:"q",
    json:true,
    shownoresults:false,
    maxresults:5
    });
    Как можно видеть из настроек — мы привязываем к полю search_input автозаполнение, а всю процедуру поиска выполняет скрипт search.php. Он может выдавать результаты как в JSON, так и в XML формате, но поскольку нет необходимости в универсальном выводе (id,value,info прошиты в js), JSON можно сгенерировать и просто как строчки без полной трансформации php-объектов в JSON.Результат поиска в JSON-формате:
    <code>{ results: [<br />	{ id: "1", value: "Foobar", info: "Cheshire" },<br />	{ id: "2", value: "Foobarfly", info: "Shropshire" },<br />	{ id: "3", value: "Foobarnacle", info: "Essex" }<br />] }</code>
    Не забудьте ограничить размер слова хотя бы до 3-х букв. Скрипт сам сгенерирует div и установит его под полем, а дальше уже можно будет нажимая клавиши выбирать подходящий результат.
    Поделиться публикацией

    Похожие публикации

    Комментарии 4

    • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
          0
          Да сейчас много ajax-библиотек, я и сам на прототипе писал простенький вывод результатов поиска, тут главная функциональность в том что скрипт сам устанавливает div с результатами куда надо, и сам обрабатывает нажатия клавиш вверх/вниз.
          0
          а как заставить этот скрипт видеть кириллицу?

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

          Самое читаемое