Jquery de autocompletare AutoComplete ajax

Dacă ați încercat să găsească ceva pe Google. probabil știți că, după ce introduceți simbolul lista derulantă apare în caseta de text care conține o duzină de linii cu cuvintele, simbolurile inițiale sunt aceleași ca și acele personaje pe care le-ați introdus deja. Acesta este modul în care Google Sugerează. De ce să nu facă același lucru de pe site-ul dvs.? La urma urmei, este convenabil. În plus, nu este prea dificil cu biblioteca jQuery ...

Ca de obicei, mai întâi voi da un exemplu, iar apoi vom analiza modul în care funcționează.

În plus, sunt utilizate diferite setări. În general, încercați un exemplu, și apoi continuați ....

Puteți descărca codul sursă al probei și prezența bibliotecii jQuery pentru a reproduce acest exemplu pe site-ul său.

În primul rând, aveți nevoie doar conectați bibliotecă și query.autocomplete.js fișierul jQuery în secțiunea HEAD a paginii pe care doriți.

Dacă ați descărcat proba, puteți înțelege și stil ușor. Rețineți că fișierul jquery.autocomplete.js utilizează nume de clasă (începe cu ac_), dar dacă doriți, indiferent de motiv, pentru a schimba aceste nume - prea va fi destul de ușor de făcut.

În ceea ce privește codul HTML, este firesc să aibă nevoie pentru a descrie câmpul de text:

Dar utilizarea jquery.autocomplete.js poate fi în două moduri diferite.

Metoda una din urmatoarele:
În cazul în care datele nu este foarte mare, iar datele nu se vor schimba, ele pot fi plasate direct pe pagină, ca în exemplul în caseta de text din partea stângă.

Metoda doi:
În cazul în care un volum mare de date și / sau se modifică frecvent, este necesar să se prevadă prelucrarea datelor de pe server (de exemplu PHP selectat). jquery.autocomplete.js implică trimiterea GET-cerere, cu parametrul q. valoarea care este introducerea caracterelor. Acesta este modul în care funcționează exemplu în caseta de text din partea dreaptă.

În aceste exemple, în plus față de datele (în primul caz) și un protocol de link (în al doilea caz), vom trece câteva opțiuni. Lista de opțiuni este prezentată mai jos:

Completării automate - atunci când începeți să introduceți text în caseta de intrare va fi introdus (și evidențiat) prima valoare de potrivire în listă. Dacă continuați să introduceți text în câmpul de introducere și va continua să fie o valoare corespunzătoare care urmează să fie înlocuit, dar având în vedere textul de căutare introdus. (Implicit: fals).

inputClass - această clasă va fi adăugat la elementul de intrare. (Implicit: «ac_input»).

resultsClass - clasa UL, care va conține elementele de rezultat (elemente LI). (Implicit: «ac_results»).

loadingClass - clasa pentru elementul de intrare într-un moment când există o prelucrare a datelor de pe server. (Implicit: «ac_loading»).

lineSeparator - simbolul care separă liniile în datele returnate de server. (Implicit: «\ n»).

cellSeparator - simbolul care separă „celula“, în șirul de date returnat de server. (Implicit: «|»).

minChars - numărul minim de caractere pe care utilizatorul trebuie să fie imprimate înainte de a va solicita aktivizirvan. (Implicit: 1).

întârziere - întârziere în milisecunde. Dacă în acest moment utilizatorul nu apăsați o tastă, aceasta activează cererea. Atunci când se utilizează o cerere locală (date care se găsesc în fișierul propriu-zis), întârzierea poate fi redus foarte mult. De exemplu, la 40ms. (Implicit: 400).

cacheLength - numărul de răspunsuri de la server, stocate în memoria cache. Dacă este setat la 1 - Memorarea datelor în cache este dezactivată. Nu puneți niciodată mai puțin de unul. (Implicit: 1).

matchSubset - fie pentru a utiliza cache-ul pentru interogări suplimentare. Folosind această opțiune poate reduce semnificativ încărcarea serverului și a crește productivitatea. Nu uitați să setați, de asemenea, valoarea cacheLength mai mult. Ex 10. (Implicit: 1).

matchCase - fie pentru a utiliza comparația este sensibil la majuscule (cu excepția cazului în care utilizați cache). (Implicit: 0).

maxItemsToShow - limitează numărul de rezultate care vor fi afișate în lista drop-down. Dacă setul de date conține sute de elemente pot fi incomode pentru a arăta întreaga listă pentru utilizator. Valoarea recomandată este de 10. (Implicit: 1).

extraParams - parametri suplimentari care pot fi transmise la server. Dacă scrieți șirul de interogare la handler pe server va fi format după cum urmează: my_handler.php q = foopage = 4 (Implicit: <>).

lățimea - stabilește lățimea lista drop-down. Implicit lățime lista verticală pentru a determina lățimea elementului de intrare. Cu toate acestea, în cazul în care lățimea elementului de intrare este mic, iar drop-jos lista rânduri conțin un număr mare de simboluri - Această opțiune poate fi utilă. (Implicit: 0).

selectFirst - dacă este setat la true. prin apăsarea Enter sau tasta Tab va selecta valoarea care este setată în prezent în celula de intrare. Dacă există un selectat manual ( „iluminate“), rezultat dintr-o listă verticală, atunci acesta va fi selectat. (Implicit: fals).

Selectonly - dacă este setat la true în lista drop-down este doar o singură valoare, este selectată prin apăsarea tastei Tab sau Enter, chiar dacă elementul nu a fost selectat de către utilizator folosind tastatura sau mouse-ul. Rețineți că această opțiune are prioritate față de opțiunea selectFirst. (Implicit: fals).

Ultimele două opțiuni sunt foarte importante, dacă doriți să faceți un element de interfață cu adevărat la îndemână și util, așa că dau exemple.

În opțiunile formatItem am identificat numele funcției numit - liFormat. și funcția creează pur și simplu un șir de caractere, care va fi introdus în elementul LI corespunzător. Șirul conține numele satului și em elementul. care arată numărul de trai acolo, în mii de oameni. Element Em are clasa QNT. prin care, folosind CSS. vom muta elementul spre dreapta, ușor reduce dimensiunea fontului, și de a face fontul în sine verde.

Următorul exemplu pentru opțiunile onItemSelect:

Aici puteți vedea cum puteți lucra cu valorile atributului «suplimentar» LI selectat elementul. În exemplul desenăm în valoarea de alertă a identificatorului pentru înregistrarea bazei noastre de date de test.

Tocmai am face din acțiunile ce vor fi efectuate pe partea de server. După cum probabil vă amintiți, am ales pentru acest PHP. Să ne amintim, de asemenea, că serverul este transferat la GET solicitare cu parametrul q. conține deja caracterele introduse de utilizator. Codul în sine puteți vedea descărcând exemplu fișierul.

Tot codul pe care îl va efectua numai în cazul existenței XMLHttpRequest. Numai în cazul în care cererea GET-a transmis cu parametrul q. De exemplu, utilizează un fișier text care conține baza de date. Iată un fragment din acest fișier:

Am citit acest fișier într-o matrice și apoi bucle prin toate rândurile din rândul lor de rupere fiecare dintre ele într-o matrice, elementul de la numărul unu (numele satului), care sunt trase pentru a se potrivi cererea GET-a trecut. În cazul în care se găsește o potrivire de afișare a informațiilor, dar într-o ordine ușor diferită decât a fost păstrat într-un fișier.

Această abordare este ales în primul rând, pentru că este un exemplu care ar trebui să fie foarte ușor de a juca din nou pe orice alt site, și în al doilea rând, că, atunci când o cantitate foarte mică de date să se simtă momentul în care interogarea este executată.

Asta e tot, mă voi întoarce pentru a dezvolta atenția asupra faptului că, pentru lucrul cu siruri de caractere folosind funcții șir multibyte.