Як використовувати віджет autocomplete iquery ui

В даному уроці ми розглянемо один з нових компонентів jQuery UI 1.8 - віджет Autocomplete. Заповнити форму полів форми може бути дуже корисною функцією для відвідувачів вашого сайту, так як вона полегшує введення інформації. Таку функцію можна використовувати, наприклад, для поля, або при введенні країни, міста, або чогось подібного, що можна вибрати з загального списку. Віджет jQuery UI Autocomplete популярний у розробників, так як його легко використовувати, він досить потужний і гнучкий.

Одним з властивостей Facebook є відправлення повідомлень друзям. Заповнити форму використовується при введенні імені одного. В даному уроці ми будемо використовувати віджет jQuery UI Autocomplete для створення системи, подібної до тієї, яка використовується при відправленні повідомлень в Facebook. Звичайно, відправку повідомлення реалізовувати не будемо. Ось що повинно вийти в результаті:

Як використовувати віджет autocomplete iquery ui

Крок 1 Getting Started

Потрібно використовувати тему за замовчуванням (UI Lightness) і переконатися в тому, що обрана версія 1.8 в колонці справа.

Крок 2 Розмітка HTML

Спочатку подивимося на

Це звичайна стандартна форма. зовнішній контейнер

використовується для завдання стилів, а елемент , до якого буде приєднуватися Autocomplete, також знаходиться всередині елемента

. стиль для задається так, що він трохи прихований, а стиль

надає йому вид, схожий з іншими полями форми. контейнера надається клас ui-helper-clearfix. щоб використовувати даний клас з CSS робочого середовища jQuery UI.

Потрібно встановити посилання на розпакований файл з архіву jQuery UI, а також на файл стилів в розділі сторінки:

Наступні файли повинні приєднуватися в кінці розділу .

Крок 3 Стилі для форми

Ми використовуємо дуже просту нейтральну тему в нашому прикладі. Наступний код CSS міститься в файлі autocomplete.css (всі стилі jQuery UI встановлюються в файлі jquery-ui-1.8.custom.css):

Для додання формі чудових прозорих кордонів із закругленими кутами використовується правила CSS3 rgba. -moz-border-radius. -webkit-border-radius і border-radius. IE не підтримує жодного їх даних правил, і, хоча можна використовувати фільтр для відтворення зачатка прозорості, закруглені кути можна зробити тільки з використанням зображень. Ефективність прозорості RGBa не проявляється в даному прикладі в повній силі. Ймовірно, що даний тип форми буде використовуватися як плаваюче модальне вікно поверх контенту сторінки.

контейнер

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

. воно не наповнюється і не потрібно було збільшувати висоту

Також ми задаємо стиль для імені одержувача, яке буде додаватися до

, як елемент . що містить посилання. В основному стиль відповідає темі і має також закруглені кути. Важливо, що дані елементи мають блокову структуру і плавають, так що вони заповнюються правильно. Також потрібно переписати деякі стилі Automcomplete, що задаються в використовуваної темі jQuery UI.

Форма повинна мати такий вигляд:

Крок 4 Приєднуємо Autocomplete

Тепер потрібно приєднати віджет Autocomplete до всередині

. Для цього використовується наступний скрипт:

Віджет приєднується до за допомогою методу autocomplete (). об'єкт передається літерально як аргумент методу, який конфигурирует опцію source і зворотні функції подій select і change.

Опція source використовується для вказівки джерела пропозиції для меню Autocomplete. Ми використовуємо функцію, як значення для даної опції, яка приймає два аргументи. Перший є терміном, введеним в . а другий - поворотній функцією, яка використовується для передачі пропозицій назад віджету.

У даній функції ми використовуємо метод jQuery getJSON () для передачі терміна в PHP файл на стороні сервера. Файл PHP використовує термін для вилучення схожих імен контактів з бази даних MySql. Ми використовуємо JSONP для повернення отриманих даних назад процесу. Поворотна функція, яка передається як другий аргумент опції source, передбачає отримання даних в масиві. Таким чином потрібно створити порожній масив і використовувати метод jQuery each () для обробки кожного пункту масиву JSON, який повертається сервером. Ітерація відбувається над кожним пунктом в масиві і додає кожне речення в новий масив. Як тільки новий масив буде побудований, ми передаємо його поворотної функції для виведення віджетом в меню.

Потім визначається обробник для події select Autocomplete. Ця функція виконується виджетом кожен раз, коли пропозиція виділяється в меню Autocomplete. Ця функція автоматично отримує два аргументи - об'єкт події і об'єкт ui, який містить вбрання пропозицію. Ми використовуємо цю функцію для форматування імені одержувача і додавання його в

. Просто створюється елемент для тексту і елемента посилання, яка використовується для видалення одержувача. Як тільки форматований ім'я одержувача буде створено, воно вставляється прямо перед закамуфльовані .

Потім ми додаємо обробник події change. Ця функція буде викликана при змінах значення . з яким асоційований Autocomplete. Ми просто видаляємо значення з . тому що ми вже додавали форматований версію в контейнер

Це вся конфігурація, яка потрібна для конкретного застосування, але є ще пара функцій, які потрібні для додання акуратності коду. Після методу autocomplete () додамо наступний код:

, до якого прикріплений наш Autocomplete, практично прихований і контейнер

має стиль, який робить його схожим на інші поля форми. Для завершення обману ми додаємо обробник події click контейнеру

, таким чином натискання клавіші миші де-завгодно на ньому фокусує дійсний . Тепер візуально і функціонально

не відрізняється від звичайного поля.

Крок 5 Додатковий код і ресурси

Для зберігання списку всіх імен кожного одержувача база даних MySql. Наступний файл PHP отримує дані, надіслані методом getJSON () і витягує відповідні імена одержувачів з бази даних:

Для запуску прикладу потрібен веб сервер з встановленим і сконфігурованим PHP, а також сервер MySql і відповідна база даних і таблиця. Коли символ вводиться в поле 'Кому', він передається на сревер і використовується для витягування з бази даних кожного імені, яке починається з введеного символу. Відповідні імена потім передаються назад на сторінку і виводяться в меню пропозицій:

висновок

Наша форма насправді нічого нікуди не відправляє. Функціонал легко реалізувати за допомогою обробки події, прив'язаного до кнопки "Відправити".

Віджет jQuery UI Autocomplete робить простим з'єднання з будь-яким джерелом даних і містить багатий функціонал для обробки подій, які ми можемо використовувати для того, щоб реагувати на введення тексту в асоційоване поле або вибір пропозиції з меню. Віджет стилизуется з використанням робочого середовища CSS jQuery UI і може легко бути налаштований на те, щоб відповідати темі сайту. В цілому, описаний віджет дуже легкий у використанні і забезпечує відмінний функціонал.

5 останніх уроків рубрики "jQuery"

Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.

jQuery плагін для створення тимчасової шкали.

jQuery плагін для створення діаграми Ганта.

Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!