Autocompletări cu jQuery


La sfârşitul a aproape două zile de săpat şi studiat pluginuri jQuery pentru autocompletări daţi-mi voie să dau raportul. Şi ca să o iau direct de la concluzii voi spune că lucrurile sunt promiţătoare, dar în funcţie de cerinţe s-ar putea ca nici una dintre soluţii să nu vă satisfacă pe deplin. În timp ce se lucrează la ele – ceea ce e bine – e mare păcat că aproape fiecare are câte un bug care poate să facă chiar inutil pluginul (dacă citiţi articolul la câteva săptămâni/luni de la scriere situaţia poate fi total alta, poate total roză).

img500

"Tăticul" este Dylan Verheul, al cărui script pentru autocomplete îl găsiţi aici iar grafic ilustrat mai sus. Ideea este relativ simplă: afişarea unui div peste (floating) elementele de sub controlul input în cauză, div care să conţină rezultatele căutării şi care să poată fi selectate din săgeţi (sus, jos) sau cu mouse-ul, în final ceea ce ne interesează ajungând în controlul input. Scriptul din păcate ia datele din sursă externă, prin AJAX. Spun din păcate pentru că dacă de exemplu vrei să foloseşti autocompletare pentru lunile anului, e mai uşor cele 12 cuvinte să le introduci în chiar pagina cu pricina, în loc să faci o pagină PHP sau ASP care să furnizeze valorile. Şi aceasta e doar una dintre limitările scriptului. Tocmai de aceea au apărut alte versiuni, pornind de la munca lui Dylan.

Dan G. Switzer a scris o versiune proprie pe care o găsiţi aici. Acest script cu adevărat face autocompletare, după cum vedeţi în captura de mai jos.

img501

Aveţi mai jos un cod simplu pentru un câmp input dedicat lunilor anului. Vedeţi în partea de opţiuni că autoFill este pus pe true, ceea ce face ca dacă ai scris de exemplu Se va apare pe fundal albastru închis şi completarea ptembrie.

$("#input_lunile").autocompleteArray(["Ianuarie","Februarie","Martie","Aprilie",
"Mai","Iunie","Iulie","August","Septembrie","Octombrie","Noiembrie","Decembrie"],
{autoFill:true,minChars:0});

Eu de exemplu nu am reuşit să fac ca un astfel de control input să facă inclusiv în interior căutări (adică em să returneze Septembrie) şi nu doar de la început de cuvânt. Mai sunt şi alte limitări, mai ales dacă privim la o altă variantă, de pe Bassistance.de (pagina e în engleză), pentru care vă invit să mergeţi aici. Acest script pare la o primă vedere a fi îngheţat acum multe luni, dar mai apoi am găsit că cea mai nouă versiune este găzduită aici, iar scriptul aici (modificat ultima oară luna trecută). Personal ceea ce m-a impresionat cel mai mult la acest plugin jQuery este că permite autocompletare pentru… câmpuri textarea! Da, cel mai bine vedeţi încărcând pagina pluginului, dar până atunci eu am încercat să o surprind în captura de mai jos.

img502

Dar… scriptul are de asemenea buguri şi limitări :( . Veţi vedea unele dintre variante dansul enervant al controlului activ (adică aţi completat un câmp ce are autocompletition, daţi tab şi ajungeţi… la începutul formularului). În plus se bazează pe alte două pluginuri jQuery. La această din urmă variantă ce este cel mai trist este că, deşi ar trebui, nu permite să scrii valori diferite de cele sugerate. Teoretic ar trebui, existând variabila mustMatch pentru a stabili acest comportament… dar degeaba. Dacă doriţi să folosiţi scriptul pentru lunile anului sau judeţe e ok… altfel nu. Dacă de exemplu vreţi să folosiţi la un câmp pentru localitate, reutilizând ceea ce există deja într-o bază de date, dar cu deschidere spre noi localităţi, versiunea de pe situl german este… inutilă. Pentru moment!

În proiectul la care lucrez acum am ales în final versiunea lui Dan G. Switzer, dar stau cu ochii şi pe versiunea prezentată la final, în aşteptarea corectării bugurilor (pe o altă filieră este pluginul suggest de aici). Trebuie să recunosc că versiunea pentru autocompletări (combobox) de la ExtJS, prezentată pe CNet.ro aici, la început de lună, este foarte elegantă şi superioară din multe puncte de vedere la toate versiunile de mai sus (da, ideea cu autocompletare la textarea nu are echivalent). Eu însă mi-am propus să nu combin n librării JScript în acelaşi proiect şi de aceea încerc să merg cu jQuery. Dar viaţa e grea. Şi încă o dată constat că mulţi developeri gândesc pentru Firefox şi nu testează sub Internet Explorer. Gata… pun punct.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *