Що таке jquery user interface. Введення в jqueryui

Бібліотека jQuery UI (User Interface) являє собою набір шаблонних елементів для створення інтерфейсу користувача і є частиною бібліотеки jQuery. Під інтерфейсом користувача мають на увазі - взаємодія користувача і веб-сторінки.

Головне завдання бібліотеки jQuery UI – це полегшити життя веб-розробникам, щоб вони не витрачали час на виконання однотипних завдань. Скрипти на JavaScript, що найчастіше зустрічаються на сайтах, були зібрані в одну бібліотеку і розробникам треба просто брати і застосовувати потрібні параметри і методи. Розробляти інтерфейси користувача стало набагато швидше.

Календарі, що використовуються на сайтах, слайдери, що спливають вікна, вже стали обов'язковим атрибутом. То навіщо щоразу розробнику писати код із нуля? Коли він може готовий шаблон підлаштувати під себе та використати на своєму сайті.

Офіційний сайт: https://jqueryui.com/

Бібліотеку jQuery UI можна завантажити на комп'ютер або підключити через посилання CDN.

У вас є два варіанти, як завантажувати бібліотеку.

Вам точно не треба завантажувати всю бібліотеку, якщо ви збираєтеся використовувати лише окремі компоненти. На сторінці Download Builder ви знімаєте всі галочки, крім потрібних компонентів. Наприклад, якщо вам потрібен тільки віджет accordion, то навпроти нього ставите в чекбокс галочку і сайт підкаже вам, які елементи будуть потрібні для роботи. Галочки будуть розставлені автоматично, там де треба і ви не завантажуватимете непотрібні файли, що позитивно позначиться на швидкості завантаження сайту.

Перш ніж натиснути кнопку download, вибираєте потрібну тему для красивого оформлення компонентів. Подивитися на візуальне оформлення готових тем можна в розділі Theme/Gallery.

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

Ситуація, коли вам потрібна вся бібліотека є малоймовірною, хіба що подивитися вихідний код. Для завантаження повної останньої версії треба натиснути кнопку: Stable .

Завантажена бібліотека підключається так само, як і через CDN , з тією різницею, що URL посилань будуть вести на папку, куди ви ці файли покладете на вашому хостингу.

У розділі Demos можна побачити які завдання (демонстраційні приклади) на сайті можна вирішити за допомогою бібліотеки.

Розглянемо на прикладі віджета-Tooltip. Призначення цього віджету: для красивого відкривання підказки, вказаної в атрибуті title .

Як завжди робимо HTML структуру. У параграфі p розміщуємо поле введення для вашого віку - input. У текстовому полі ми вказуємо атрибут title з текстом "Вкажіть, будь ласка, Ваш вік". До цього елемента ми і застосуємо віджет tooltip.

Ваш вік:

Після завантаження DOM дерева на об'єкті document ми звернемося до методу tooltip . Ми звертаємося відразу до всієї сторінки (document), щоб цей метод можна було б застосувати і до інших елементів сторінки. Після виклику методу tooltip значення атрибутів title будуть відображатися у підказці.

Перше питання, яке виникає на початку роботи з бібліотекою jQuery — як її підключити? Дивно, що я не написав про це раніше і зараз вирішив заповнити цю прогалину.

У цій статті я розповім як правильно додати jQuery на звичайному html-сайті та на популярних двигунах.

Найпоширеніший спосіб підключення бібліотеки. Для початку необхідно завантажити свіжу версію із сайту розробника. На сторінці завантаження представлено кілька варіантів бібліотеки, наприклад, зараз пропонується скачати «Compressed, production jQuery 3.1.1» і «Uncompressed, development jQuery 3.1.1». Перший варіант - це стислий варіант бібліотеки, звідти видалені всі коментарі, в цьому випадку бібліотека займає набагато менше місця, отже сторінка, на яку вона буде підключена, буде завантажуватися швидше. Другий варіант — це, грубо кажучи, вихідний код бібліотеки, він структурований у зручному для читання вигляді з коментарями, і призначений насамперед розробникам. Тому рекомендую використовувати стислу версію бібліотеки.

Після того як бібліотека завантажена, необхідно розмістити її на сервері, де знаходяться файли сайту. Я зазвичай в корені сайту створюю папку «js» в яку копіюю потрібні бібліотеки і там же розміщую файл зі своїми функціями.

Тепер можна переходити безпосередньо до підключення jQuery. Структура веб-сторінки, на яку Ви підключаєте jQuery, може бути різною. Але в ній обов'язково присутні теги HTML, HEAD та BODY. Для підключення jQuery необхідно додати тег SCRIPT з посиланням на бібліотеку всередину тега HEAD.

Заголовок сайту

У деяких випадках, бібліотеку підключають перед тегом body, що закривається, що пов'язано з порядком обробки html сторінки браузером. Оскільки браузер вичитує рядки послідовно, при підключенні jQuery в кінці файлу спочатку браузер відобразить сайт, а потім вже підключить динаміку. При повільному з'єднанні такий підхід забезпечує збільшення швидкості завантаження сайту, і вже потім роботу слайдерів та іншого. Код при такому підключенні виглядає так:

Заголовок сайту

Увага! Бажано не міняти назву файлу бібліотеки jQuery (часто змінюють на jquery.js), тому що надалі збереження офіційної назви файлу допоможе побачити, яку версію бібліотеки Ви використовуєте (у моєму прикладі використовується версія 3.1.1).

Цей спосіб хороший тим, що бібліотека підключається із сайту і не валяється на жорсткому диску. Особливо це актуально за великої кількості маленьких проектів і для навчання.

Цей спосіб підключення називається "Підключення з CDN". Мережа доставки контенту або як її частіше називають CDN (Content Delivery Network) є мережею серверів по всьому світу. Вони допомагають покращити продуктивність вашого веб-сервера та зменшують навантаження на ваш трафік.

Найбільш популярні CDN для підключення jQuery:

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

Заголовок сайту

Перевагою даного способу є те, що багато сайтів підключають jQuery через Google API, а це означає, що з великою ймовірністю ця бібліотека вже присутня в кеші браузера користувача, і вона не буде завантажуватися вдруге взагалі.

Підключення jQuery у WordPress здійснюється автоматично, тому немає необхідності підключати бібліотеки інших версій вручну. Це відбувається у шаблоні за допомогою php коду:

У результаті всередині тега HEAD з'явиться рядок підключення jQuery.

На момент написання статті з WordPress поставляється jQuery v1.12.4 Але, як бачите, версія бібліотеки дуже відрізняється від тієї, яку підключали в прикладах вище. Підключити нову версію бібліотеки можна, але є шанс виникнення конфлікту.

Щоб уникнути конфлікту, але при цьому використовувати ту версію бібліотеки, яка потрібна, потрібно скористатися правильним способом підключення jQuery у файлі functions.php:

Установка бібліотеки jQuery UI

Завантажити та встановити бібліотеку jQuery UI у певному сенсі складніше, ніж інші бібліотеки JavaScript. Цей процес не те щоб трудомісткий, але потребує пояснень, чому і присвячена дана стаття. Для роботи з прикладами вам достатньо встановити версію бібліотеки, призначену для розробки, але нижче також описується, як встановити мінімізовані файли, орієнтовані на розгортання у виробничому середовищі, і як використовувати jQuery UI через мережі розповсюдження вмісту (CDN).

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

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

На сайті jQuery UI можна скористатися послугами спеціального додатка - настроювальника тем (Themeroller), але крім того існує ціла галерея зумовлених тем, повністю готових до використання, з яких можна вибрати ту, яка вас найбільше влаштовує, і тим самим полегшити собі життя.

Почніть із відвідування сайту jqueryui.com і клацніть на кнопці Themes. В результаті відкриється сторінка ThemeRoller, що відображає віджети jQuery UI і розташовану ліворуч від них панель налаштувань, за допомогою якої можна встановити параметри теми оформлення, як показано на малюнку:

Якщо у вас вже використовується певний візуальний стиль, якого ви повинні дотримуватися, і ви хочете, щоб візуальний інтерфейс засобів JQuery UI узгоджувався з рештою сайту або програми, то вкладка Roll Your Own (яка вибирається за замовчуванням) – це саме те, що потрібно. Можна змінити будь-який аспект оформлення за допомогою набору стилів CSS, що використовується бібліотекою jQuery UI.

Щоб отримати одну з готових тем, перейдіть на вкладку Gallery. На момент написання цих рядків галерея включала 24 теми, що охоплюють широкий спектр варіантів колірного оформлення – від приглушених та ніжних тонів до яскравих та зухвалих. При виконанні клацань на темах галереї зовнішній вигляд віджетів, що відображаються на решті сторінки, буде відповідним чином оновлюватися, дозволяючи вам оцінити, як може виглядати програма:

Використовувана для jQuery UI стандартна тема має назву UI lightness, але ця тема недостатньо контрастна, і тому я використовуватиму тему Sunny, яка виглядає трохи краще. Єдине, що від вас зараз потрібно - це запам'ятати назву теми, яка вас влаштовує.

Вибравши для себе певну тему оформлення, можете розпочати створення власного варіанту завантаження бібліотеки jQuery UI. Натисніть кнопку Download у верхній частині сторінки, щоб перейти на сторінку Download Builder. Ви побачите список компонентів jQuery UI, розбитих на чотири функціональні групи: UI Core, Interactions, Widgets та Effects.

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

Для виконання прикладів вам знадобляться всі компоненти, тому простежте, щоб були встановлені всі прапорці.

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

Наступний крок полягає у виборі теми. Це робиться за допомогою списку, що розкривається, який розташовується знизу на сторінці, як показано на малюнку:

Ви також маєте можливість вибрати конкретну версію бібліотеки jQuery UI, яка повинна бути включена до завантажувального архіву. Потрібно завантажити стабільну (Stable) версію, яка працює з усіма версіями бібліотеки jQuery, починаючи з версії 1.3.2.

Після виділення всіх компонентів і вибору теми та стабільної версії завантажте створений вами варіант завантажувального архіву бібліотеки jQuery UI, клацнувши на кнопці Download.

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

Ви повинні скопіювати в папку з файлами прикладів такі файли та папки:

development-bundle\ui\jquery-ui.custom.js;

development-bundle\themes\sunny\jquery-ui.css;

папка development-bundle\themes\sunny\images.

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

Все, що вам тепер залишається зробити, - це включити бібліотеку jQuery UI в свій HTML-документ. Це можна зробити, додавши до документа елементи script і link, що містять посилання на файли JavaScript та CSS, які ви завантажили, як показано на прикладі нижче:

Бібліотека jQuery

Посилатися безпосередньо на папку images необов'язково. Якщо папка images і CSS-файл знаходяться на своїх місцях, jQuery UI зможе самостійно знайти всі необхідні ресурси.

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

Наведений у прикладі вище документ містить простий тест, що дозволяє перевірити правильність підключення бібліотеки jQuery UI. У разі нормального відкриття сторінки, ви повинні побачити кнопку, схожу на ту, яка показана на малюнку. Не звертайте уваги на виклик методу button() в елементі script. Про те, для чого він призначений і як працює, ви дізнаєтесь у статті.

У разі неправильної вказівки шляху до будь-якої з двох бібліотек ви побачите натомість просте посилання.

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

jquery-ui-1.10.3.custom.min;

jquery-ui-1.10.3.custom.min

папка css\sunny\images

Папка images і файл CSS тут ті самі, що й у версії розробки; зміни можуть стосуватися лише файлу JavaScript. Щоб виконати чисту установку, достатньо копіювати ці файли в каталог сервера.

Питання про використання CDN для завантаження бібліотеки jQuery вже порушувалося раніше. Якщо ви прихильник такого підходу, то вас порадує той факт, що так само можна зробити і у випадку бібліотеки jQuery UI. Як Google, так і Microsoft забезпечують хостинг файлів jQuery UI у своїх мережах CDN. Для нашого базового прикладу я використовую службу Microsoft, оскільки вона надає JavaScript-файли jQuery UI, так і стандартні теми оформлення.

Щоб використовувати CDN, необхідно мати URL-адреси потрібних файлів. Якщо мова йде про службу Microsoft, перейдіть на сторінку Microsoft Ajax Content Delivery Network . Прокрутивши сторінку вниз, ви побачите список посилань, які відповідають різним версіям jQuery UI. Клацніть на посилання версії, яку ви використовуєте (у моєму випадку це версія 1.10.3). Ви побачите URL-адреси для звичайної та мінімізованої версій файлу бібліотеки jQuery UI.

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

Щоб підключити ці файли до документа через CDN, достатньо помістити в елементи script і link не посилання на локальні файли jQuery UI, а відповідні URL-адреси, як показано нижче.

Бібліотека jQuery $(function() ( $("a").button(); ));

Завітайте на сайт www.professorweb.ru

Знову-таки, ознакою правильності вказівки URL-адрес буде служити відображення на сторінці кнопки, що відкрилася, аналогічної тієї, яка показана на малюнку вище.

Що таке jQuery UI? jQuery UI (з анг. jQuery Інтерфейс користувача

) – це бібліотека віджетів та взаємодій, побудована на основі jQuery JavaScript бібліотеки, яку можна використовувати для створення високо-інтерактивних web-додатків. Для того щоб наочно ознайомитися з можливістю jQuery UI бібліотеки відвідайте сторінку: Demos & Documentation — на сайті.

jqueryui.com

Тепер, коли ви розумієте, що таке jQuery UI, можна приступити до вибору, необхідних для завантаження, компонентів: UI Core (основні функції ПІ), Interactions (взаємодії), Widgets (віджети), Effects (ефекти) та Theme (теми оформлення) – тим самим створивши свою копію бібліотеки jQuery UI. Для цього завітайте на сторінку: Build Your Download . Там же можна швидко завантажити останню Stable або Legacy версії бібліотеку jQuery UI.

ZIP архів завантаженої вами бібліотеки jQuery UI міститиме таке:

Для підключення бібліотеки jQuery UI зазвичай вистачає трьох посилань: CSS теми ПІ, бібліотеки jQuery та jQuery UI. Виглядати це може так: Після того, як ви підключили потрібні файли, ви можете починати додавати потрібні віджети на вашу сторінку. Наприклад, щоб зробити DatePicker (з анг.вибір дати

, додамо текстове поде:

А також JavaScript код:

$(function()( $("#date").datepicker(); ));

Налаштування jQuery UI

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

Наприклад, для того, щоб задати формат дати для віджету DatePicker, можна скористатися опцією: dateFormat.

$("#date").datepicker(( dateFormat: "yy-mm-dd"));

Отримати значення опції після ініціації віджету можна так:

var dateFormat = $("#date").datepicker("option", "dateFormat");

Вказати значення опції після ініціації віджету можна так:

$("#date").datepicker("option", "dateFormat", "yy-mm-dd");

Візуальне налаштування.

Для налаштування власної теми jQuery UI є ThemeRoller , що дозволяє візуально налаштувати компоненти вашого інтерфейсу. Скористайтеся та докладніше дізнатися про цей інструмент ви можете відвідавши сторінку:

Дуже давно не писав нічого у блозі і ось нарешті вибрав трохи часу, щоб розповісти про віджет Autocomplete, який був включений до складу jQuery UI – надбудови над JavaScript-бібліотекою jQuery.

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

Спочатку відвідаємо сторінку на сайті jQuery UI, щоб отримати необхідні нам файли. Клацаємо по посиланню Deselect all component, щоб не закачувати зайве, а потім вибираємо тільки те, що нам потрібно – відзначаємо чекбокс Autocomplete і бачимо, що разом з ним відзначилися чекбокси Core, Widget та Position. Робота віджета Autocomplete залежить від цих файлів.

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

Отже, спочатку у розділі HEAD потрібно підключити кілька файлів, які є у архіві.

Спочатку ми підключили файл стильового оформлення віджету, потім файл бібліотеки jQuery. Третій підключений файл необхідний для реалізації Autocomplete.

Віджет Autocomplete не потребує складної HTML-розмітки. Достатньо лише поля для введення тексту, тобто. звичайний елемент input, який має значення text в атрибуті type. Додаткову розмітку можна додати, щоб використовувати стилі відповідно до вибраної теми оформлення.

Tags:

$(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"]; ("#tags").autocomplete(( source: availableTags ));

У змінній наявнихтаках приготували масив з підказками. Потім вибрали елемент input за його ідентифікатором і застосували метод autocomplete, якому одразу передали об'єкт з налаштуваннями. Поки що цей об'єкт з єдиною властивістю source , що визначає джерело даних. У нашому випадку вказаний масив доступний Tags .

Насправді ми можемо трохи настроїти віджет, використовуючи інші властивості об'єкта налаштувань. Ось список цих властивостей:

source – опція не має значення за умовчанням і має бути обов'язково визначена. Значення опції може бути рядок, масив або функція. У будь-якому випадку в цій опції має бути вказано джерело даних.
minLength – значення за замовчуванням 1. У цій опції вказується кількість символів, яка має бути введена в поле введення, перш ніж активуються підказки. Значення 0 корисне при використанні локальних даних зі списків з кількох позицій. Це значення має бути збільшено при використанні запитів до сервера для отримання даних та при використанні великих списків, де одному введеному символу може відповідати кілька тисяч найменувань.
delay – значення за замовчуванням 300. У цій опції вказується кількість мілісекунд, яка має пройти після натискання чергової клавіші, щоб активізувати запит на отримання даних. Нульове значення має сенс під час використання локальних даних. При використанні запитів до сервера нульове значення в цій опції може спричинити серйозне навантаження.
appendTo – значення за промовчанням 'body'. Як значення цієї опції можна використовувати селектор jQuery. Визначає, до якого елемента повинен бути доданий список підказок, що випадає.
disabled – значення за промовчанням false. Якщо встановити значення true, то при ініціалізації функціональність віджета 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"]; ("#tags").autocomplete(( source: availableTags, select: function(event, ui) ( alert("Подія: " + event.type + ",\nзначення: " + ui.item.value); ) ) ); ));

Тут ми додали властивість select , де визначили функцію, яка буде викликатись у той момент, коли користувач вибере якесь значення зі списку підказок. функція приймає два аргументи: перший - об'єкт event, другий - спеціальний об'єкт ui. Організувавши доступ до властивостей цих об'єктів можна отримати корисну інформацію (ми виводимо її у вікні попередження).

Це не єдина подія, на яку вміє реагувати віджет – ось повний їх список, де вказано назву властивості в об'єкті з налаштуваннями, назву події в event.type та опис події:

create – Подія autocompletecreateнастає у момент ініціалізації.
search – подія autocompletesearchнастає перед виконанням запиту. Якщо функція, визначена в цій опції, поверне false, запит не буде надіслано.
open – подія autocompleteopenнастає в момент, коли відкривається список підказок, що випадає.
focus – подія autocompletefocusнастає щоразу, коли один із пунктів списку підказок отримує фокус.
select – подія autocompleteselectнастає, коли вибрано один із пунктів списку підказок.
close – подія autocompletecloseнастає, коли список підказок закривається. Подія настає незалежно від того, був обраний один із пунктів чи ні.
change – подія autocompletechangeнастає після того, як вибрано один із пунктів списку. Подія завжди настає після close.

Є у віджету й деякі методи, за допомогою яких можна розширити його функціональність.

Для прикладу додайте до HTML-розмітки пару кнопок:

Шукати "as" Закрити Tags:

І ось такий JS-код:

$(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"]; ("#tags").autocomplete(( source: availableTags, minLength: 0 )); $("#search").click(function()( $("#tags").autocomplete("search", "as "); )); $("#close").click(function()( $("#tags").autocomplete("close"); )); ));

Тепер, клацнувши по кнопці Шукати «as» ми можемо імітувати дії користувача, ніби він ввів символи «as» в елементі input . Натиснувши кнопку Закрити – закриваємо список підказок, якщо він був відкритий раніше.

Нижче наведено опис усіх доступних методів:

destroy – .autocomplete('destroy') повністю видаляє всю функціональність віджету Autocomplete. Повертає елементи у стан, що передує ініціалізації.
disable – .autocomplete('disable') тимчасово забороняє використання всієї функціональності віджету. Знову дозволити її можна за допомогою методу enable.
enable - .autocomplete ( 'enable') дозволяє використання всієї функціональності віджету, якщо раніше вона була заборонена методом disable.
option – .autocomplete('option', optionName, ) за допомогою цього методу можна встановити значення будь-якої опції віджету після ініціалізації.
option – .autocomplete('option', optionName) за допомогою цього методу можна отримати значення будь-якої опції віджету після ініціалізації.
widget – .autocomplete('widget') за допомогою цього методу можна отримати доступ до об'єкта, який є елементом з функціональністю Autocomplete.
search – .autocomplete('search, ') з допомогою цього без передачі другого параметра можна відкрити весь список. Якщо передати рядок символів у другому параметрі, відкриється список із відповідними підказками.
close – .autocomplete('close') закриває список підказок, якщо його було відкрито раніше.

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

Опція source , яка, нагадаю, є обов'язковою і визначає джерело даних, може також приймати рядок, де міститься url, до якого слід надсилати запит. А ще в source можна визначити свою функцію, яка буде робити те, що треба саме Вам. Ось цей, мабуть, найбільш гнучкий спосіб ми і розберемо. Спробуємо отримати у вигляді списку підказок будь-які дані із сервера geonames.org

Я повністю наведу робочий код і спробую роз'яснити, як і що працює.

example-17-8-4 .ui-autocomplete-loading ( background: #FFF url("/instruction/2011/css/ui-lightness/images/ui-anim_basic_16x16.gif") right center no-repeat; ) #city ( width: 25em; ) #log ( height: 200px; width: 600px; overflow: auto; ) $(function() ( $("#city").autocomplete(( source: function(request,response)) ( $. ajax(( url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: ( featureClass: "P", style: "full", maxRows: 12, name_startsWith: request.term ) , success: function(data) ( response($.map(data.geonames, function(item)) ( return ( label: item.name + ", " + item.countryName, value: item.name + " (" + item .countryName + ")" + "[" + item.lat + ", " + item.lng + "]" )))); ), minLength: 3, select: function(event,ui) ( $("

").text(ui.item ? ui.item.value: "Нічого не вибрано!").prependTo("#log"); $("#log").attr("scrollTop", 0); ) ) ); )); Місто:
Підтримується geonames.org

Спочатку дивимося на HTML-розмітку. У першому елементі div нас цікавить лише елемент input з ідентифікатором city. Сюди вводитимемо початкові літери (латиницею) населеного пункту, інформацію про яке ми хотіли б отримати. Елемент div з ідентифікатором log використовуємо для занесення до нього отриманої інформації.

Якщо дивитися JavaScript-код, то побачимо, що об'єкт з налаштуваннями містить три властивості - обов'язкова властивість source, а також властивості minLength і select.
Ми розглядатимемо лише властивості source , де можна написати свою функцію. Ця функція приймає два аргументи. Перший аргумент - request - об'єкт, що містить єдину властивість term , в якому зберігається рядок, введений користувачем у полі введення. Другий аргумент - response - функція, за допомогою якої оброблятиметься отримана відповідь.

Усередині функції, визначеної як source ми маємо майже необмежену свободу дій. А тому, не мудруючи, пишемо там ajax-запит до URL http://ws.geonames.org/searchJSON, в опції dataType вказуємо, що у відповіді очікуємо отримати дані у форматі JSON. У опції data визначаємо об'єкт із параметрами запиту, який буде надсилатись на вказаний url ( чому саме такі параметри – треба дивитися документацію по API на сервері geonames.org). В останньому параметрі передаємо request.term те, що ввів користувач.

У наступній опції ajax-запиту - опції success, викликаємо функцію обробки відповіді response. В аргументі, який ми передаємо цією функцією, ми можемо обробляти дані, отримані у відповіді сервера так, як нам завгодно. Ми використовуємо метод $.map, щоб застосувати певну функцію до кожного елемента об'єкта, переданого в першому аргументі. Всередині функції ми можемо звертатися до властивостей об'єкта - item.countryName, item.lng, item.lat ( чому властивості саме такі – див. документацію по API, яку надає веб-сервіс). Функція, яку ми написали, для кожного елемента повертає об'єкт, що містить дві властивості, які ми визначили самостійно, використовуючи отримані дані. З масиву таких об'єктів, що вийшов, і будується список підказок.

Загалом, ось так якось… На закінчення, велике людське прохання – у коментарях, будь ласка, можете похвалити чи посварити в принципі. Якщо ж Ви хочете поставити технічне питання, то ставте його на