Cauta rapid aici ↑

Autocomplete

Modalitatea de a creea un camp de cautare sau un motor de cautare intern intr-o pagina web din HTML si JavaScript reprezinta o mica provocare pentru orice frontend developer. Scopul fiind de a ne rupe de munca de backend in totalitate chiar daca intreg codul nostru poate fi vazut si copiat. Din punct de vedere profesional daca reusesti sa faci ceva cu JavaScript ceea ce se poate realiza cu limbaje de backend, ma refer la PHP si/sau ASP, atunci poti spune ca esti un programator foarte bun si poti continua munca in JavaScript atata timp cat problemele de securitate nu iti afecteaza integritatea site-ului.

Crearea unui motor de cautare intern se poate realiza pe partea de client folosindu-ne de expresiile regulate. Un aspect foarte important legat de expresiile regulate este acela ca acestea NU SUNT UN LIMBAJ DE PROGRAMARE si din acest motiv nu avem posibilitatea sa ne folosim de ceea ce ne ofera un limbaj de programare, printre care si variabile, foarte folositoare in acest caz. EXPRESIILE REGULATE NU SUNT ALTCEVA DECAT NISTE SIMBOLURI.

In exemplul din acest tutorial va voi arata cum se poate simula un autocomplete. Sunt convins ca ati auzit de evenimentul input si nu il confundati cu tag-ul HTML <input />. Pentru cei care nu au auzit de acest eveniment tin sa le spun ca acest eveniment este declansat in momentul cand sunt inserate caractere text si nu doar text intr-un tag HTML de tip input.

Odata ce acest eveniment este declansat inseamna ca vizitatorul pagini web insereaza diferite caractere pe care noi le putem folosi pentru a-i afisa diferite rezultate, rezultate ce in acest caz le vom tine intr-un array.

Script-ul nostru nu este deloc complicat si am facut tot posibilul sa elimin orice nu era necesar, inclusiv butonul de submit si tag-ul form din care campul de input facea parte. Practic vom avea doar un camp de input si un div in care vom afisa rezultatul.

Urmatorul pas este sa scriem script-ul nostru cat mai simplu. Primul pas a fost sa creez functia ce ma va scuti sa scriu de mai multe ori document.querySelector() cu care selectam elementul HTML de care aveam nevoie.

Urmatorul pas in script este sa selectam cele doua componente HTML din pagina de care avem nevoie si sa le declaram in variabile. Despre tag-ul de input cu acelasi id si div-ul unde ne sunt afisate rezultatele ce va avea un id cu valoarea optionala output. Vom avea nevoie si de o a treia variabila, variabila de tip array care va simula o mica baza de date din care vom lua rezultatele.

Imediat ce am terminat si cu array-ul care simuleaza baza de date, trecem la creearea functiei callback care va rula in momentul cand este declansat evenimentul input pe elementul cu acelasi id. In ecuatia scriptului ne vom folosi de metoda addEventListener(). In interiorul functiei anonime callback vom creea functia match care va testa pentru potrivire ceea ce a inserat utilizatorul cu ceea ce avem in array-ul ce simuleaza baza de date. In interiorul functiei match vom declara o variabila care se va creea obiectul regex si va instantia functia RegExp() a obiectului window. In interiorul RegExp() vom plasa textul ce se afla in interiorul campului de input (ca prim argument), acest text este reprezentat de proprietatea value a obiectului input. De acest text vom legat metoda replace() care va inlocui orice caracter care nu este de tip text cu nimic. Al doilea argument in interiorul RegExp() vor fi literele g si i. G reprezinta global si cauta la nivel global iar i reprezinta cautare case-insensitive si reprezinta cautare fara a tine cont daca este scris cu litera mica sau mare.

Imediat sub aceasta variabila regex vom avea noul array ce va fi returnat si apoi afisat in elementul cu id output din pagina. Practic functia match va returna o noua versiune a array-ul ce contine datele noastre. Pentru a realiza asta m-am folosit de metoda filter() ce va avea un parametru, parametru ce va fi testat pentru potrivire si in cazul unui succes atunci va fi inserat in noua versiunea a array-ul ce contine datele noastre. Singurul lucru care ne-a ramas este sa inseram noua versiune a array-ul in pagina si vom face asta cu ajutorul proprietatii innerHTML, proprietate ce o vom atasa obiectului output ce selecteaza elementul cu acelasi id din pagina.