Правене на автодовършване в JavaScript - Javascript
От днес започваме да събираме собствена колекция от полезни плъгини jQuery и Mootools. Приблизително веднъж седмично ще правим подробно описание на някой плъгин, който решава спешните задачи на обикновен дизайнер на оформление.
Защо питаш. В крайна сметка има Google, намирането на правилния плъгин не е проблем. Да, Google е нещо, но проблемът е друг - сега има толкова много добавки, че дяволът ще си счупи крака в тях. Има много добавки, но никой не знае кои са добри, удобни, бързо адаптивни. Ето защо решихме да направим нашата селекция от плъгини „временно проверени“ ;-)
Консултирахме се и реших да започна нашата селекция от плъгини с плъгина за автоматично попълване на полета. В статията ще разгледаме плъгини както за Mootools, така и за jQuery (който модифицирах малко).
Праистория
Точно онзи ден задачата беше повторена, но сега ни трябваше версия за jQuery. „Да, като два пръста върху кнехт“, казах аз и отворих Google. Час по-късно се оказа, че да, има плъгини, много, различни, красиви, но не всички. В тях нямаше удобство на Кришнер.
jQuery версия
Както казах, нямаше jQuery плъгини, подходящи за мен, но имаше горе-долу подобен - модификация на jQuery Autocomplete плъгина от PengoWorks. Какво не ми пасна в него? Нека да разгледаме две снимки: лявата е полето за търсене в Safari, дясната е работата на плъгина преди моята намеса.
Изводът е, че когато въвеждате низ за търсене, под него се появяват опции. Ако натиснете стрелката надолу, тогава в Safari редът в полето ще бъде завършен автоматично и добавената част веднага ще бъде маркирана. Ако преместите стрелката, ще се промени само заменената част. Нищо не се е променило в плъгина. Беше неудобно.
Така че нека да разгледаме кода. Свързване на плъгина:
Страхотно, файлът backend1.php е вътреотговорът на GET заявка ни връща прост текст, където всяка дума трябва да е на нов ред:
Просто, нали? Можете да видите възможните параметри на скрипта в документацията. Но мисля, че не ти трябват за нормална работа.
Версия на Mootools
Както казах, този плъгин е написан от Harald Kershner. Скриптът може да получава данни както от текущия документ (те му се предават като параметри), така и да изисква от него чрез AJAX (HTML или JSON). Ще разгледам пример с HTML, за да ми е по-близко и разбираемо.
Свържете скрипта към полето:
На сървъра предоставяме данните, съответстващи на POST заявката:
Надявам се, че сега няма да прекарате няколко часа в търсене на плъгин за автоматично довършване - просто ще отидете на Temporarily.net, ще прочетете отново статията и бързо ще направите всичко правилно. Късмет!