Jquery autocomplete
У перекладі з англійської "autocomplete" означає автозавершення (автодоповнення), в нашому випадку це автозавершення шуканих користувачем даних. Погодьтеся зручно, коли користувач набирає не всю фразу для пошуку а перші два символи або слова, а інші додаються автоматично. Більш того, будь-який сайт повинен підтримувати функції autocomplete всюди, де це можливо, щоб полегшити життя користувача! Для цього призначений плагін jQuery Autocomplete, який підтримує такі види даних для завантаження і автозавершения:- jQuery Autocomplete з XML
- jQuery Autocomplete з JSON
- jQuery Autocomplete з масивом
jQuery Autocomplete з висновком призначених для користувача зображень
Практичний приклад використання jQuery Autocomplete з висновком зображень і описів мультфільмів.
Надрукуйте назву мультфільму (що починається з "Ш", "С", "Р") і оберіть
Для роботи цього прикладу потрібен простий jQuery скрипт:
Найпростіший варіант jQuery Autocomplete
Найзручніший, на мій погляд, варіант autocomplete - з пошуком і завантаженням даних з бази myqsl! Даний варіант вказано на офіційному сайті jQuery першим із прикладів.
Весь код jQuery:
В даном прикладі всі запити плагіна надходять в php скрипт "sug.php", який прівідён нижче:
Скрипт "sug.php" формує правильні заголовки овтета і повертає його в форматі json, заголовки необхідно вказувати для явної вказівки типу возращаться обекта і його кодування. Дані, які повертає скрипт "sug.php", формуються класом "Suggest" у файлі "suggest.class.php" в форматі json (всі файли можна сказачать трохи нижче одним архівом):
jQuery Autocomplete з ajax завантаженням даних в форматі XML
Приклад вказаний вище розрахований на отримання даних в форматі json, однак припустимі й інші формати. Приклад jQuery Autocomplete в якому використовується xml.
Для цього необхідно внести невеликі зміни в скрипт, що повертає відповідь в форматі XML і в скрипт jQuery. Такий вид Auocomplete має істотний недолік - великі обсяги даних не слід виводити через XML і AJAX так як це сильно уповільнює роботу скриптів на сторінці.
jQuery скрипт ми змінили, але не забудемо внести зміни в php скрипт на стороні сервера, який не сильно відрізняється від прикладу з json форматом, зазначеним трохи вище. Принцип такий - нам потрібно повернути дані в певному форматі, - зараз в форматі xml, що і робить клас "suggestXml", при цьому дані можуть повертатися з будь-якої бази, або з файлу xml і т.д .:
Приклад jQuery Autocomplete з результатом, збереженим в кеш.
Для того щоб зберігати дані і не звертатися до сервера по кілька разів для економії ресурсів сервера і поліпшення швидкості додатки, можна використовувати код вказаний нижче: