Бібліотека jQuery UI. Віджет autocomplete

46

Від автора: вітаю вас, друзі. У цій статті ми з вами продовжимо знайомитися з бібліотекою jQuery UI. У статті ми дізнаємося, як встановити та налаштувати віджет autocomplete (автозаповнення), який можна використовувати для організації живого пошуку на сайті, тобто пошуку без перезавантаження сторінки.

Отже, друзі, наступний плагін бібліотеки jQuery UI, який ми розглянемо, буде віджет autocomplete. Це дійсно ефектний плагін, який дозволяє в лічені хвилини реалізувати на сайті живий пошук за типом пошуку Google або Яндекс. Тобто користувач починає набирати пошуковий запит, а йому відразу ж починають пропонуватися можливі варіанти пошукових запитів.

Приклади і документацію до плагіну autocomplete бібліотеки jQuery UI можна знайти на наступній сторінці. Базовий приклад продемонструє суть роботи віджета. Спробуємо ввести латинську літеру a і побачимо випадаючий список з підказками – це слова, у яких зустрічається набрана літера. Спробуємо додати ще одну букву, скажімо латинську s – список вже стане менше, у ньому залишаться лише варіанти з поєднанням літер as.

Библиотека jQuery UI. Виджет autocomplete

Дійсно ефектне рішення, яке насправді ще і дуже зручно для користувачів вашого сайту. Давайте спробуємо реалізувати найпростіший функціонал. Отже, нам буде потрібно поле типу text для введення пошукового запиту.

Пошук:

Библиотека jQuery UI. Виджет autocomplete

А тепер трохи магії jQuery UI, точніше її плагіна autocomplete. На сайті ви, швидше за все, будете при початку введення тексту в поле пошуку відправляти асинхронний запит та отримувати відповідь з результатами пошуку від сервера. До речі, реалізацію такого варіанту можна подивитися в цьому і наступних уроках.

У даній же статті ми не будемо писати повноцінне рішення для організації пошуку, а обмежимося пошуком по деякого масиву. Отже, нам потрібний масив у JavaScript і всього один методу плагіна autocomplete:

$(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

Пошук працює. Як і інші плагіни jQuery UI, плагін autocomplete можна настроювати. Список опцій можна знайти тут. Наприклад, при реалізації цього пошуку вам, швидше за все, потрібно буде починати пошук не з першого символу, а, скажімо, з третього, щоб не завантажувати сервер безглуздими запитами. Зробити це допоможе опція minLength:

$( «#search» ).autocomplete({
source: availableTags,
minLength: 3
});

Тепер пошук почнеться тільки після введення третього символу. Досить зручно, чи не так? У наступних статтях ми продовжимо знайомитися з іншими плагінами бібліотеки jQuery UI. Ну а поки що все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!