От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем, как установить и настроить виджет autocomplete (автозаполнение), который можно использовать для организации живого поиска на сайте, т.е. поиска без перезагрузки страницы.
Итак, друзья, следующий плагин библиотеки jQuery UI, который мы рассмотрим, будет виджет autocomplete. Это действительно эффектный плагин, который позволяет в считанные минуты реализовать на сайте живой поиск по типу поиска Google или Яндекс. Т.е. пользователь начинает набирать поисковый запрос, а ему сразу же начинают предлагаться возможные варианты поисковых запросов.
Примеры и документацию к плагину autocomplete библиотеки jQuery UI можно найти на следующей странице. Базовый пример продемонстрирует суть работы виджета. Попробуем ввести латинскую литеру a и увидим выпадающий список с подсказками – это слова, в которых встречается набранная буква. Попробуем добавить еще одну букву, скажем латинскую s – список уже станет меньше, в нем останутся лишь варианты с сочетанием литер as.
Действительно эффектное решение, которое на самом деле еще и очень удобно для пользователей вашего сайта. Давайте попробуем реализовать простейший функционал. Итак, нам потребуется поле типа text для ввода поискового запроса.
|
1 2 3 4 5 6 |
<form class="form-inline"> <div class="form-group"> <label for="search">Поиск: </label> <input type="text" class="form-control" id="search"> </div> </form> |
А теперь немного магии jQuery UI, точнее ее плагина autocomplete. На сайте вы, скорее всего, будете при начале ввода в поле поиска отправлять асинхронный запрос и получать ответ с результатами поиска от сервера. К слову, реализацию такого варианта можно посмотреть в этом и нескольких следующих уроках.
В данной же статье мы не будем писать полноценное решение для организации поиска, а ограничимся поиском по некоторому массиву. Итак, нам нужен массив в JavaScript и всего один метода плагина autocomplete:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
$(function(){ var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#search" ).autocomplete({ source: availableTags }); }); |
Вот, собственно, и все. Попробуйте ввести, как и в примере с официального сайта выше, букву a, затем s – и вы увидите готовое решение задачи.
Поиск работает. Как и другие плагины jQuery UI, плагин autocomplete можно настраивать. Список опций можно найти здесь. Например, при реализации настоящего поиска вам, скорее всего, нужно будет начинать поиск не с первого символа, а, скажем, с третьего, чтобы не загружать сервер бессмысленными запросами. Сделать это поможет опция minLength:
|
1 2 3 4 |
$( "#search" ).autocomplete({ source: availableTags, minLength: 3 }); |
Теперь поиск начнется только после ввода третьего символа. Достаточно удобно, не так ли? В следующих статьях мы продолжим знакомиться с другими плагинами библиотеки jQuery UI. Ну а пока все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
