В этой статье пойдет речь о plugin-ах для jQuery, которые представляют реализацию элемента управления autocomplete. В простейшем виде это обычное поле ввода, при наборе одной или нескольких букв в котором, под ним появляется выпадающий список, который отображает варианты содержащие введенные символы. Например вы вводите сначала букву К в поле для ввода города и через секунду видите список: Кисловодск, Краснодар, Кропоткин. Если вы продолжаете ввод, то после ввода буквы Р у вас получится “Кр” и тут же в выпадающем списке останутся только 2 последних города, так как только они начинаются на “Кр”. Если вы сразу увидели нужный вариант, то вы можете выбрать его и он появится в текстовом поле. jQuery очень богата плагинами и данный случай  не исключение. Есть несколько плагинов. Давайте посмотрим что каждый из них умеет.

Первый из них скромный. Так о нем написано на данной странице Unobtrusive jQuery autocomplete plugin

Однако арсенал у него отнюдь не скромный. Это качественный элемент, с голубой анимационной картинкой, появляющейся при загрузке вариантов с сервера внутри поля ввода. Работает только с данными получаемыми от сервера. В демонстрационном архиве есть php-скрипт, который делает запрос к БД, преобразовывает результат в JSON и отправляет браузеру в ответе на AJAX-запрос. После инициализации jQuery-plugin создает для передаваемого ему текстового поля скрытое поле (hidden). При выборе какого-либо варианта текст вариант помещается в текстовое поле, а id варианта в скрытое поле. Таким образом при отправке формы, где содержится такой элемент на сервер придет информация не только какой текст был выбран, но и его id. Во многих задачах важен именно этот параметр.
Итак плагин имеет следующие особенности:

  • Запрашивает варианты через AJAX
  • Работает с JSON
  • Передает id записи на сервер при отправке формы
  • Минимальное количество символов, после которого идет запрос, меняется задается параметром конструктора.
  • Выделяет в вариантах списка набранные символы жирным
  • Поддерживает работу со стрелками на клавиатуре
  • В конструкторе можно задавать обработчики на событие начала AJAX-запроса и приход ответа
  • Есть опция валидации. Если она true, то при не выбранном значении поле ввода будет очищаться

Вот такие вот скромные у него возможности.

Следующий jQuery autocomplete plugin. jquery.suggest
“Google Suggest”- подобный элемент.

  • Минимальное количество символов можно менять
  • Можно задавать разные css-классы для разных состояний элемента
  • Поддерживает работу со стрелками на клавиатуре
  • Не выделяет в вариантах списка набранные символы
  • Принимает данные с сервера в собственном формате. Текст варианта - текст который попадет в поле ввода после выбора - вертикальная черта - перенос строки - следующий вариант
  • id-записи не передает
  • Есть обход бага с невозможностью перекрытия элемента select другими элементами в IE

Третьим идет довольно уникальный plugin. Почему? Потому что этот плагин умеет работать и с многострочными полями ввода. Его описание и демонстрация здесь jQuery plugin: Autocomplete . На скрине видно как выглядит работа с многострочным полем.
Так выглядит многострочный элемент с выпадающим списком

  • Выделяет жирным символы поиска. Подкрашивает четные и нечетные строки
  • Может стирать при поиске то что вы набрали (опционально)
  • Поддерживает работу со стрелками на клавиатуре
  • Можно вводить несколько величин через запятую
  • Может опционально автодополнять из первого попавшегося результата с выделением для стирания
  • При полном стирании может отображать все варианты
  • Может работать как из локального массива так и через AJAX
  • id-записи не передает
  • С серверными данными работает как предыдущий плагин
  • Опционально можно скачать дополнение которое решает баг с select в IE

Четвертый plugin. Dylan Verheul’s jQuery Autocomplete plugin Имеет свои особенности. Как только они умудряются каждый своим путем идти? Зато выбор есть…

  • Не выделяет жирным символы поиска.
  • Поддерживает работу со стрелками на клавиатуре
  • Может автодополнять из первого попавшегося результата с выделением для стирания
  • Может работать как из локального массива так и через AJAX
  • Есть обход бага с невозможностью перекрытия элемента select другими элементами в IE
  • id-записи не передает на сервер (не создает скрытого элемента), но на уровне JS есть возможность его получить, обратившись к js-объекту элемента
  • С серверными данными работает как предыдущие 2 плагина

Пятый элемент Nodstrum Auto Completer (на этот раз планету не спас).
Так выглядит Nodstrum Autocomplete Plugin
Выпадающий список имеет уголок как у всплывающий подсказок, что совсем не к месту. С сервера получает html-код через AJAX, в котором прописаны свойства элементов для js-действий. Работу со стрелками клавиатуры не поддерживает. Id конечно же не поддерживает. Трудно отыскать достоинства… Но зато есть описание как вам самостоятельно сделать jquery autocomplete plugin.

Шестой. AutoCompleteBox. Самобытный и вероятно качественный элемент управления. Имеет кнопку очистки поля ввода. Весьма красиво оформлен как сам элемент, так и выпадающий список. Наиболее пестрый из всех претендентов. Настолько пестрый, что идти по всем пунктам в том виде в котором они есть выше как то не хорошо. Он особенный! А значит и описание у него особенное!
Так выглядит AutoCompleteBox Plugin
Можно задавать текст, который будет показываться во время загрузки списка. Можно задавать поля, которые обновятся связанными данными после выбора варианта. Например, если выбираете email, то в соседних элементах можно отображать имя и фамилию адресата. Данные передаются с сервера в собственном формате id - знак равно - текст - запятая - следующая запись. Чтобы передать id на сервер вполне можно создать скрытое поле вручную и указать в конструкторе, что надо его обновлять. К сожалению со стрелками клавиатуры не работает. В общем, с учетом того, что в последующих версиях могут и добавить недостающие вещи довольно быстро (да и вы сами это легко добавите), этот элемент вполне может занять свою нишу в вашем сундучке готовых решений.

Седьмой plugin - FlexBox jQuery Autocomplete Plugin. Выглядит достаточно представительно. Имеет ряд функция, не имеющихся в других autocopmlete plugin-ах. Выпадающий список с вариантами имеет разбиение на страницы, что удобно при большом числе предлагаемых вариантов.
Можно задавать шаблон для пунктов выпадающего списка (опция resultTemplate). Например так

 resultTemplate: '
<div class="col1">{id}</div>
<div class="col2">{name}</div>
'

Для выпадающего спиcка можно задать режим подсветки. Например подсвечивать все вхождения, или только одно. Регистрозависимый поиск для подсветки или нет (опция highlightMatchesRegExModifier). Справа от списка есть стрелка, для скрытия и показа выпадающего списка. Стрелку можно не отображать (опция showArrow).
Можно скрывать выпадающий список и пользоваться только функцией autocomplete - дополнения первым вариантом прямо в поле ввода (опция showResults).
Так выглядит FlexBox Plugin
А с типовыми функция дело обстоит так:

  • Работает как с локальным массивом данных, так и через AJAX
  • Работает с JSON
  • Передает id записи на сервер при отправке формы.
  • Минимальное количество символов, после которого идет запрос, меняется задается параметром конструктора.
  • Выделяет в вариантах списка набранные символы css-стилем
  • Может опционально автодополнять из первого попавшегося результата с выделением для стирания
  • Поддерживает работу со стрелками на клавиатуре
  • Можно задавать обработчик на событие выбора элемента
  • Нет обхожения бага с невозможностью перекрытия элемента select другими элементами в IE

Восьмой представитель FCBKcomplete v 1.09.
Как можно догадаться по его названию этот plugin можно использовать для формирования списка персон, как это делается в популярной социальной сети facebook.
Вы можете набирать начальные буквы имени, выбирать элемент в выпадающем списке. Выбранные элементы будут добавляться. На каждом из них есть кнопка удаления.
Этот plugin довольно специфичен. Общим аршином его не изменить.
Так выглядит FCBKcomplete jQuery Plugin
Но все же приведу традиционный список

  • Работает с JSON. Может кешировать данные.
  • На сервер самостоятельно ничего не передает как элемент формы.
  • Минимальное количество символов всегда равно 1.
  • Выделяет в вариантах списка набранные символы css-стилем
  • Не может автодополнять из первого попавшегося результата с выделением для стирания
  • Не поддерживает работу со стрелками на клавиатуре
  • Можно задавать обработчик на событие выбора элемента
  • Нет обхожения бага с невозможностью перекрытия элемента select другими элементами в IE

Есть еще один интересный jQuery plugin, о котором бы хотелось сказать. Это jQuery quickSearch. Это не autocomplete, но очень похож по принципу работы и может быть кому-нибудь понадобится именно такой. Что он делает? При инициализации ему можно указать строку типа table#table_example tbody tr и при наборе текста в текстовом поле он будет производить поиск в строках таблицы с id table_example и отображать только строки, в которых встречается введенная строка. Это такой быстрый поиск по таблице.
Не совсем Autocomplete
Элемент может работать не только с таблицами. На странице демонстрации (ссылка находится выше) есть несколько различных примеров и описание опций.

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

Google Bookmarks Digg Reddit del.icio.us Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong Rambler Закладки
Tags: , , ,

12 Responses to “jQuery autocomplete plugin. Поля ввода с AJAX drop-down”

  1.  илья Says:

    Какой смысл упоминать пятый элемент, если даже нет его названия?-)

  2.  Игорь Тельменко Says:

    Хм… пропала ссылка. Спасибо. Я исправлю.

  3.  Игорь Тельменко Says:

    Исправил. Это был Nodstrum Auto Completer.

  4.  Ruslan Says:

    Нашел еще 2 интересных плагина на эту тему
    http://plugins.jquery.com/project/FlexBox
    http://plugins.jquery.com/project/FCBKcomplete

  5.  Денис Чистяков Says:

    Спасибо за отличный и редкий обзор.
    Судя по всему так и придется пользоваться «третьим» вариантом, т.к. он единственный кто позволяет мультикомплит, а жаль — не очень он удобный и с JSON-ом его надо «руками дружить», но функционал действительно самый расширенный из всех.

  6.  Игорь Тельменко Says:

    Пожалуйста, заходите еще. Эх.. Так и не успел пока 2 плагина посмотреть, про которые Ruslan написал.

  7.  Игорь Тельменко Says:

    Спасибо Руслану! Описал те 2 autocomplete plugin-а, что он нашел.
    Возможно это не рекорд. Пишите, может кто еще какой jquery plugin знает?

  8.  Илья Барков Says:

    Спасибо за столь подробный обзор, благодаря ему инашел самый подходящий для себя скрипт.

  9.  Игорь Тельменко Says:

    Еще одна ссылка на jquery autocomplete plugin аля facebook.

  10.  Андрей Says:

    Странно что большинство подобных плагинов не умеют делать автокомплит прямо в строке, а лишь показывают выпадающий список. FlexBox кажется умеет, но похоже его разработка была закончена на версии jQ 1.2

  11.  Игорь Тельменко Says:

    Еще этот autocomplete должен это уметь опционально.

  12.  Kosting Says:

    Спасибо за обзор.

Leave a Reply

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