Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Використання віджета Autocomplete jQuery UI

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by Nadia Gonzales (you can also view the original English article)

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

Я не є ярим шанувальником Facebook, мені набагато більше подобається Twitter (до речі, @danwellman), проте одна з можливостей Facebook, що мені дійсно подобається, – обмін повідомленнями, завдяки якій ви можете відправляти повідомлення другу або друзям. Мені подобається, як в цій соціальній мережі використовується можливість автозаповнення вводу імен ваших друзів і як форматуються імена одразу після вибору та додавання в поле 'to', наприклад: у кожного імені є посилання close (* закрити. Тут і надалі примітка перекладача), завдяки якому ім'я можна легко видалити без необхідності вибору якого-небудь тексту.

У цьому посібнику ми будемо використовувати віджет jQuery UI Autocomplete для імітації цієї характеристики системи обміну повідомленнями Facebook. Проте, ми не будемо розглядати власне реалізацію відправлення повідомлень. Нижче наводиться те, що ми будемо створювати:


Крок 1: Початок роботи

Нам потрібно буде створити користувальницький варіант завантаження jQuery UI, при якому у с будуть тільки необхідні нам компоненти; скористайтеся конструктором для формування завантаження на http://jqueryui.com/download. Нам будуть потрібні наступні компоненти:

  • Core
  • Widget
  • Position

Також нам потрібен буде сам віджет Autocomplete, так що впевніться, що в розділі Components зліва відмічені як вищезазначені компоненти, так і Autocomplete.  Використовуйте тему за налаштуванням  (UI Lightness) та впевніться, що справа вибрано версію 1.8.

Одразу після завантаження створіть нову папку на вашому комп'ютері та назвіть її autocomplete. Потім відкрийте архів та скопіюйте папки css та js до тільки-но створеної вами папки. Після цього у вас будуть всі потрібні для нашого прикладу файли бібліотеки, включаючи файл самої jQuery, так що його не потрібно завантажувати окремо.


Крок 2: HTML–код, на основі якого будемо працювати з віджетом

Давайте розглянемо в першу чергу код HTML <form>:

Це доволі стандартна форма; у нас є зовнішній контейнер <div>, який ми можемо використовувати для оформлення форми, та <input>, до якого буде підключено Autocomplete, всередині елемента <div>; ми задамо стильове оформлення для <input> таким чином, що він буде частково прихований, і для <div> так, що він буде виглядати подібно решті полів форми. Ми задаємо для контейнера <input> ім'я класу ui-helper-clearfix, щоб скористатися цим допоміжним класом у фреймворку CSS jQuery UI.

Також нам потрібно додати посилання на файли, які ми витягнули з архіву jQuery UI, і н нашу таблицю стилів; наступні посилання повинні розташовуватися в тегу <head> сторінки:

Наступні посилання повинні розташовуватися в кінці тегу <body>:


Крок 3: Задаємо стильове оформлення для форми

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

Для того щоб отримати чудову прозору границю форми зі скругленими кутами ми використовуємо правило RGBa CSS3 і правила -moz-border-radius, -webkit-border-radius та border-radius; быльшість популярних браузерів (включаючи Firefox, Safari, Chrome та Opera) зараз підтримують ці правила. IE не підтримує жодне з них (* зараз (2018) вже підтримує), і хоча можна скористатися властивістю filter для реалізації найпростішої прозорості, для реалізації скруглених кутів потрібно буде використовувати зображення. У цьому прикладі потенціал прозорості RGBa далеко не розкрито; проте цей тип форми у своїй повній реалізації скоріше за все використовувався би в якості компонента модального вікна (* блокує взаємодію користувача з додатком, що ініціює діалог; дочірнє вікно для взаємодії користувача із застосуванням: воно служить для отримання інформації від додатка або для вводу запитуваних даних та вибору опцій; тому модальне вікно часто називають діалоговим (dialog box , modal dialog). Якщо відкривається модальне вікно, то повернення керування застосуванню може відбутися тільки після реакції користувача), що розташовувалося би поверх власне вмісту сторінки.

Для контейнера <div> навколо поля <input>, до якого буде підключено текстове поле Autocomplete, задано те саме позиціонування та стильове оформлення, як і для елементів  <input>, проте у  <input> всередині цього контейнера видалено границю таким чином, що його приховано. Також ми зменшуємо його ширину та задаємо значенням його властивості float left. Це робиться для того, щоб при додаванні відформатованих імен отримувачів до  <div>  <input> не переповнював і не збільшував висоту  <div> без потреби.

Також ми зменшуємо його ширину та задаємо значенням його властивості float left. Це робиться для того, щоб при додаванні відформатованих імен отримувачів до  <div>  <input> не переповнював і не збільшував висоту  div> без потреби. Також нам потрібно переписати деякі правила стильового оформлення Autocomplete, що застосовуються від теми jQuery UI, яку використовуємо; завдяки останньому селектору ми просто запобігаємо переходу слів окремих пропозицій в меню на новий рядок (* текст розташовується на тій самій лінії, поки не зустрінеться тег <br>), що відбувається через те, що ми зробили  <input>, з яким вони пов'язані, дуже невеликим.

На цьому етапі форма повинна виглядати наступним чином:


Крок 4: Підключаємо Autocomplete

Далі нам потрібно підключити до  <input> всередині  <div> Autocomplete; для цього ми можемо використовувати наступний скрипт:

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

Опція source використовується для повідомлення віджету, звідки брати пропозиції для меню Autocomplete. Ми використовуємо в якості значення цієї опції функцію, що приймає два аргументи: перший – буква, яку введено у  <input>, другий – функція зворотного виклику, що використовується для повернення пропозицій назад віджету.

У цій функції ми використовуємо метод jQuery's getJSON() для передачі букви файлу PHP на серверній стороні. У файлі PHP буква буде використовуватися для витягнення відповідних варіантів отримувачів із бази даних MySql. Ми використовуємо функцію зворотного виклику JSONP (* JSON with Padding, або JSON-P; надає спосіб запитати дані з сервера, що знаходиться на іншому домені – операцію, яку заборонено у типових браузерах через політику обмеження домену) для оброблення повернутих сервером даних; для функції зворотного виклику, яку передаємо в якості другого аргументу до опції source, потрібно, щоб дані передавалися у вигляді масиву, так що ми спочатку створюємо пустий масив і потім використовуємо метод each() jQuery для оброблення кожного елемента в масиві JSON, повернутому сервером. Ми просто здійснюємо ітерацію по всім елементам у цьому масиві та додаємо кожну пропозицію до нашого нового масиву. Одразу після створення нашого нового масиву ми передаємо його до функції зворотного виклику, щоб віджет відобразив його елементи в меню.

Далі ми визначаємо обробник для власної події Autocomplete select; ця функція буде виконуватися віджетом кожного разу при виборі пропозиції з меню Autocomplete. До цієї функції автоматично передаються два параметри: об'єкт події та об'єкт ui, що містить вибрану користувачем пропозицію.  Ми використовуємо цю функцію для форматування імені отримувача та додавання його до  <div>. Ми просто створюємо елемент  <span> для розташування тексту та якір, який можна використовувати для видалення імені отримувача. Після створення відформатованого отримувача ми просто додаємо його одразу перед замаскованим  <input>.

Нарешті, ми додаємо обробник для події change; ця функція буде викликатися кожного разу при зміні значення  <input>, до якого підключено Autocomplete. Ми просто використовуємо її для видалення значення з  <input>, оскільки ми вже додали відформатовану версію імені отримувача до нашого контейнеру  <div>. Курсор виглядає трохи зависоко після додавання відформатованого імені отримувача до  <div>, тому ми також використовуємо цей обробник, щоб підкорегувати цей момент.

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

Елемент  <input>, до якого підключено наш віджет Autocomplete, частково приховано, і його контейнер  <div> оформлено таким чином, що він виглядає, як і інші полі форми; для вдалого здійснення нашої хитринки ми додаємо обробник події click до контейнера таким чином, що при натисканні будь-де всередині нього фокус переходить власне до  <input>. Візуально та функціонально  <div> тепер не можна відрізнити від звичайного поля.

Також нам необхідно оброблювати натискання по якорю, що додається до кожного відформатованого отримувача; ми використовуємо метод jQuery live() (* працює як для існуючих, так і для майбутніх елементів, що відповідають селекторові), оскільки ці елементи можуть як існувати на сторінці, так і ні у кожний момент часу і це легше здійснити, ніж підключення обробника кожного разу при створенні одного з цих якорів. Кожного разу при натисканні по одному з цих якорів ми всього лише звертаємося до батька якоря, якого було натиснуто, і потім видаляємо його зі сторінки. Пам'ятаєте, як ми підкорегували позицію курсору раніше у скрипті? Нам просто потрібно впевнитися, чи всі отримувачі було видалено, і якщо це так, то задати для його позиції початкове значення.


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

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

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

У цьому посібнику було показано, як зімітувати форму Facebook для відправлення повідомлень, а саме: спосіб додавання друзів в якості отримувачів до форми для відправлення повідомлень за допомогою Autocomplete та метод форматування імен друзів одразу після їх додавання таким чином, що їх можна легко видалити. Форма нашого прикладу власне нічого не робить, проте для того, щоб насправді відправити форму, нам знадобилося би передати вміст форми файлу на сервері за допомогою запиту  AJAX (* Asynchronous JavaScript And XML – асинхронний JavaScript + XML), який можна легко додати в обробнику для події submit, що генерується при натисканні кнопки для відправлення форми.

Імена отримувачів повинні були би, звісно ж, якось розпізнаватися серверною частиною додатку, і ймовірно були би прив'язані до адрес електронної пошти, що зберігаються в базі даних. Нам знадобилося би отримати текстовий вміст всіх елементів  <span> перед відправленням даних на сервер, хоча з цим проблем виникнути не повинно було би.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.