Робимо автозаповнення на JavaScript - Javascript
З сьогоднішнього дня ми починаємо збирати власну колекцію корисних плагінів на jQuery та Mootools. Десь раз на тиждень ми будемо робити докладний опис якогось плагіна, що вирішує нагальні завдання рядового верстальника.
Навіщо просіть ви. Адже є Гугл, потрібний плагін знайти не проблема. Так, Google це річ, але проблема в іншому — зараз плагінів розлучилося стільки, що в них чорт ногу зломить. Плагінове море, але які з них хороші, зручні, швидкокастомізовані — ніхто не знає. Тому ми і вирішили робити свою добірку плагінів «перевірено на тимчасово» ;-)
Ми радилися і я вирішив почати нашу вибірку плагінів з плагіна автозаполення полів. У статті ми розглянемо плагіни як під Mootools, так і під jQuery (який я трохи допрацював).
Передісторія
Буквально днями завдання повторилося, але тепер була потрібна версія під jQuery. "Та як два пальці об кнехт" сказав я і відкрив Гугл. За годину з'ясувалося, що так, плагіни є, багато, різні, гарні, але все не ті. Кришнерівської зручності у них не було.
jQuery версія
Як я вже сказав, підходящих мені плагінів на jQuery не було, але був більш-менш схожий - модифікація плагіна jQuery Autocomplete від ПенгоВоркс. Що мене в ньому не влаштовувало? Подивимося на дві картинки: ліва – поле пошуку в Сафарі, права – робота плагіна до мого втручання.
Суть у тому, що, коли ви набираєте рядок для пошуку, під ним з'являються варіанти. Якщо натиснути стрілку вниз, то Сафарі рядок у полі буде доповнюватися автоматично, і додана частина відразу ж виділяється. Якщо рухати стрілку, то змінюватиметься тільки частина, що підставляється. У плагіні нічого не змінювалося. Це було незручно.
Отже, подивимось на код. Прив'язуємо плагін:
Відмінно, файл backend1.php ввідповідь на GET запит повертає нам простий текст, де кожне слово має бути на новому рядку:
Просто, чи не так? Можливі параметри скрипта ви можете переглянути в документації. Але я думаю, для звичайної роботи вам вони не потрібні.
Mootools версія
Як я вже сказав, цей плагін написав Гаральд Кершнер. Скрипт може отримувати дані як з поточного документа (вони передаються як параметри), так і запитувати за допомогою AJAX (HTML або JSON). Я розгляну приклад з HTML, то він мені ближче і зрозуміліше.
Прив'язуємо скрипт до поля:
На сервері віддаємо дані, що відповідають запиту POST:
Сподіваюся, що в пошуках плагіна для автозаповнення ви тепер не витрачатимете кілька годин - ви просто зайдете на Временно.Нет, перечитаєте статтю і швиденько зробите все, як треба. Успіхів!