Подсказки при поиске (sres v0.1)

Вывод поисковых подсказок нынче моден. От чего же не сделать плагин, чтобы больше не возвращаться к этому вопросу? Сказано, сделано! Плагин красуется (v0.1), с примером, больше месяца, а описать удалось только сейчас.

В тексте input подразумевается input[type="text"].

Нужно:

в неактивном input выводить фразу, типа: введите слово…
прикрутить слой, по ширине такой же как input
любимый ajax для обработки и вывода информации

В общем идет все стандартно, обрабатываем события:

keyup – как нажали кнопку, пошла обработка запроса
focus – чтоб убрать слой title и активировать поиск
blur – убрать результаты поиска
mouseenter – на input, чтоб не показывалось title средствами браузера
mouseenter – на слой с результатами
mouseleave – на слой с результатами
click – на слой title, чтоб его убрать и поставить focus на input

Делаем html код. Самой проблемой было высчитать ширину input, так как в разных браузерах были разные результаты. Методом тыка, стилей, получили нужное (см.код).

И не забываем о атрибуте autocomplete, его нужно выключить (off), иначе браузеры будут подставлять свои возможные примеры.

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

16.10.2010, 21:09 Рубрика: jquery

Ссылки по теме:

16.10.2010 - Подсказки при поиске (sres v0.1)

Комментарии

Сергей (08.10.2011, 19:49:22) пишет:

С базы например или файла.

Алексей (26.07.2011, 18:15:47) пишет:

Не совсем понял, а откуда берутся сами подсказки...

Сергей (04.04.2011, 19:42:02) пишет:

А почему нельзя при клике на подсказку автоматически заполнить ею поле?

jquery
поиск с подсказкой
поиск с подсказками php
подсказки при поиске
поиск с подсказками
скрипт подсказка к поисковой
input подсказка
подсказка в поиске
подсказка при поиске
input
jquery поиск с подсказками
input
ajax подсказки
jquery подсказки при поиске
ajax
ajax подсказка при вводе
всплывающая подсказка при поиске
поиск с подсказкой jquery
php поиск с подсказкой
jquery подсказки input
jquery подсказка при поиске
ajax
jquery подсказки при вводе
как сделать подсказки к поиску
подсказки к поиску
jquery input подсказки
как сделать поиск с подсказками
подсказки поиск AJAX
input jquery
как установить подсказки для поисковика
подсказка поиск jquery
jquery подсказки для поиска
ajax подсказка при поиске
подсказка при поиске ajax
Ajax
всплывающая подсказка при вводе текста поиск
jquery input подсказка
поиск подсказки
подсказки при поиске ajax
php поиск подсказка
подсказки input
jquery всплывающая подсказка при поиске
при вводе в input подсказки
jquery поиск с подсказкой
скрипт поиск с подсказками
input подсказки
Jquery поисковые подсказки
поиск подсказки аякс
поиск с подсказками ajax