Jquery функция за автоматично довършване на автоматичното довършване, Аякс

Ако сте се опитали да намерят нещо за Google. сигурно знаете, че след въвеждане на символ от падащия списък се появява в текстовото поле, което съдържа една дузина линии с думите, началните символи са същите, като тези знаци, които вече сте въвели. Ето как Google Suggest. Защо да не направим същото и на вашия сайт? В края на краищата, това е удобно. В допълнение, той не е твърде трудно с библиотеката JQuery ...

Както обикновено, първо ще дам един пример, а след това ние ще анализираме как работи.

В допълнение, се използват различни настройки. Като цяло, опитайте един пример, а след това продължи ....

Можете да изтеглите изходния код на пробата и наличието на библиотеката JQuery да възпроизвежда този пример на своя уебсайт.

Първо, трябва само да свържете библиотека и query.autocomplete.js файл JQuery в секцията HEAD на страницата, която искате.

Ако сте изтеглили пробата, лесно можете да разберете и стайлинг. Имайте предвид, че jquery.autocomplete.js файл използва имената на класовете (започнем с ac_), но ако искате да, независимо по какви причини, за да промените тези имена - това също ще бъде доста лесно да се направи.

По отношение на HTML-кода, е естествено да се наложи да се опише текстовото поле:

Но използването на jquery.autocomplete.js може да бъде по два различни начина.

Метод он:
Ако данните не е много голяма, както и данните няма да се променят, те могат да бъдат поставени директно на страницата, както в примера в текстовото поле отляво.

Метод две:
Ако голям обем данни и / или често променящи се, че е необходимо да се предвиди за обработка на данните на сървъра (например избран PHP). jquery.autocomplete.js включва изпращането на GET-заявка с Q на параметъра. стойността на които е въвеждането на героите. Това е начина, по примера работи в текстовото поле на правото.

В тези примери, в допълнение към данните (в първия случай) и URL манипулатор (във втория случай), минаваме някои опции. Списъкът от опции е показан по-долу:

функцията за автоматично попълване - когато започнете да въвеждате текст в полето за въвеждане ще бъде включен (и подчерта) първото съвпадение на стойността в списъка. Ако продължите да въвеждате текст в полето за въвеждане и ще продължи да бъде подходяща стойност за да бъдат заместени, но с оглед на въведения текст за търсене. (По подразбиране: невярно).

inputClass - този клас ще бъде добавен към входния елемент. (По подразбиране: «ac_input»).

resultsClass - клас UL, който ще съдържа елементите резултат (LI елементи). (По подразбиране: «ac_results»).

loadingClass - клас за въвеждане на елемент в момент, когато там е обработка на данни на сървъра. (По подразбиране: «ac_loading»).

lineSeparator - на символа, който разделя линии в данните, изведени от сървъра. (По подразбиране: «\ н»).

cellSeparator - на символа, който разделя "клетка", който съдържа низът данни върнат от сървъра. (По подразбиране: «|»).

minChars - минималния брой символи, които потребителят трябва да се отпечатват преди воля aktivizirvan поискване. (По подразбиране: 1).

ЗАКЪСНЕНИЕ - в милисекунди. Ако в рамките на този период потребителят не натиснете клавиш, той активира искането. При използване на местния поискване (данни, разположени в самия файл), забавянето може да бъде значително намалена. Например за 40ms. (Подразбиране: 400).

cacheLength - брой на отговорите от сървъра, съхранявани в кеша. Ако е зададено на 1 - кеширане на данни е забранено. Никога не поставяйте по-малко от един. (По подразбиране: 1).

matchSubset - дали да се използва на кеша за допълнителни въпроси. Използването на тази опция може значително да се намали натоварването на сървърите и увеличаване на производителността. Не забравяйте да зададете cacheLength на стойност повече. Например 10. (подразбиране: 1).

matchCase - дали да се използва сравнението на буквите има значение (освен ако не използвате кеширане). (По подразбиране: 0).

maxItemsToShow - ограничава броя на резултатите, които ще бъдат показани в падащия списък. Ако набор от данни съдържа стотици елементи могат да бъдат неудобни за да покаже на целия списък за потребителя. Препоръчителната стойност е 10 (по подразбиране: 1).

extraParams - допълнителни параметри, които могат да се прехвърлят на сървър. Ако пишете низа на заявката за манипулатор на ще се формира на сървъра, както следва: my_handler.php р = foopage = 4 (по подразбиране: <>).

ширина - определя широчината на падащия списък. По подразбиране ширина от падащия списък за измерване на ширината на входния елемент. Въпреки това, ако ширината на входящия елемент е малък, и от падащия списък редове съдържат голям брой символи - Тази опция може да бъде от полза. (По подразбиране: 0).

selectFirst - ако е настроено, за да е истина. чрез натискане на Enter или Tab ключ ще изберете стойността, която в момента е настроен във входната клетка. Ако има ръчно подбран ( "осветен") резултат от падащия списък, след което тя ще бъде избрана. (По подразбиране: невярно).

selectOnly - ако е настроено, за да е вярно в падащия списък на само една стойност, тя се избира чрез натискане на клавиша Tab или Enter, дори ако елементът не е бил избран от потребителя с помощта на клавиатурата или мишката. Имайте предвид, че тази опция отменя selectFirst опция. (По подразбиране: невярно).

Последните две опции са много важни, ако искате да направите много удобен и полезен интерфейс елемент, така че да даде примери.

В опциите formatItem ние сме идентифицирали името на функцията, наречена - liFormat. и функцията просто създава низ, който се вмъква в подходящ LI елемент. Низът съдържа името на селото и до заетост елемент. който показва броя на живеещи там, в хиляди души. Ем елемент има qnt клас. от които, като се използват CSS. ние преместите елемента на дясно, леко намаляване на размера на шрифта, и да направи себе си шрифт зелено.

Следващият пример за опции onItemSelect:

Тук можете да видите как можете да работите с ценностите на атрибута «допълнително» LI избран елемент. В примера, който привлече за предупреждение стойност на идентификатора за запис на нашата тестова база данни.

Ние трябва само да се действията, които ще се изпълняват на сървъра страна. Както вероятно си спомняте, ние сме избрали за тази PHP. Нека също така не забравяйте, че сървърът се прехвърля на GET-заявка с Q на параметъра. вече съдържа знаците, въведени от потребителя. Самият код можете да видите, като изтеглите например файла.

Всички от нас код ще изпълнява само ако XMLHttpRequest съществуване. Само ако предава GET-молба с Q на параметъра. Така например, използва текстов файл, който съдържа базата данни. Ето един откъс от този файл:

Четем този файл в масив и след това примки през всички редове от своя страна се счупи всеки един от тях в масив, елементът под номер едно (името на селото), които са изготвени за да съответства на преминал GET-заявка. Ако не се намери съответствие информационен дисплей, но в малко по-различен ред от него се пази във файл.

Този подход е избран, на първо място, защото това е един пример, който трябва да бъде много лесно да се играе отново на всеки друг сайт, и второ, че когато много малко количество данни, за да се чувствате в момента, когато заявката се изпълнява.

Това е всичко, аз ще се обърнат към разработване на вниманието ви към факта, че за работа с низове с помощта многобайтовите функции низ.