Cauta rapid aici ↑

Cum sa iti creezi un motor de cautare intern doar din javascript

Pare ciudat insa poti creea foarte bine ceea ce limbajele ce ruleaza pe server fac asta de anii de zile. Javascript poate imita foarte bine acest proces si ii putem oferi utilizatorului sugesti cu informatii pe care acesta le cauta in motorul de cautare intern.

Avantajul unui astfel de motor de cautare intern facut doar din Javascript este ca nu trebuie sa cream filtre de securitate pe care limbajele pe server le fac si asta pentru ca se aplica regula nescrisa in care nu trebuie sa ai nicioadta incredere in ceea ce utilizatorul adauga intr-un camp de input. Alte avantaje sunt acelea ca ii oferi utilizatorului sugestii in timp ce acesta tasteaza in campul de input creand astfel efectul de autocomplete sau autocompletare si binenteles ca nu il mai pui sa efectueze click pe un buton si apoi sa astepte rezultate interogarii unei baze de date cu ajutorul unui script ce ruleaza pe server.

Dezavantajul este ca toata aceasta informatie se afla deja la dispozitia utilizatorului iar aceasta informatie se poate vedea destul de usor dar nu asta ne dorim, nu ne dorim sa ii oferim utilizatorului o informatie cat mai rapid pentru a-i oferi o experienta cat mai placuta in paginile noastre ?

La realizarea unui astfel de motor am folosit putin mai mult decat de obicei limbajul CSS si asta pentru ca este important pentru mine sa intelegeti cat mai usor.

Cea mai mare parte a intregului script din Javascript il va reprezenta un array care va contine toata informatia pe care o vom afisa utilizatorului iar acest array va tine loc de baza de date. In acest array putem sa avem orice informatie ne dorim pentru ca va fi obligatoriu sub forma unui text si din acest motiv este bine sa adaugam respectiva informatie sub forma unui link catre o pagina pentru ca utilizatorul sa poata efectua click si sa viziteze respectiva pagina cu mai multe informatii.

Sub acest array vom testa intr-o conditie if... else daca utilizatorul a tastat (pentru acest caz) mai mult de doua caractere si imediat ce aceasta conditie a fost indeplinita atunci vom executa script-ul din aceasta conditie, in caz contrar ii vom sterge rezultatele din elementul in care afisam datele din array.

In cazul in care strunctura if nu a fost indeplinita si totusi utilizatorul a inserat text in campul de input atunci devine optional daca vrem sa ii adaugam un text prin care sa ii spunem ca interogarea nu a returnat nici-un rezultat.

Revin la structura if pentru a o explica mai in detaliu. Dupa ce conditia a fost indeplinita va trebui sa adaugam intr-o variabila textul pe care utilizatorul la inserat si cu litere micii. Vom face asta cu ajutorul metodei toLoweCase().

Urmatorul pas este sa parcurgem intreg array-ul cu informatii si pentru asta vom avea nevoie de o bucla repetitiva for. In interiorul acestei bucle for vom adauga o conditie if prin care vom testa daca ceea ce a inserat utilizatorul (si am adaugat acest text intr-o variabila) se potriveste cu unul sau mai multe string-uri din array. In cazul in care exesta potrivire o alta variabila va prelua de fiecare data ceea ce s-a potrivit. Observati ca aceasta bucla for va rula la fiecare adaugare de litera, cifra sau orice caracter a utilizatorului si cu cat array-ul este mai mare cu atat de mult va munci aceasta bucla for. Dupa ce aceasta bucla for si-a facut treaba atunci nu ne mai ramane decat sa adaugam rezultatul nostru sub forma de string in elementul din pagina pentru ca utilizatorul sa le poata vedea.

Observati ca la crearea acestui script am creat cateva functii cu care mi-am facut munca mai usoara iar un aspect foarte important este legat de limbajul CSS. Veti vedea in acest limbaj ca m-am folosit de o clasa dn cu care am ascuns sau afisat dupa caz elementul din pagina in care adaugam rezultatul interogarii. Tot acest element are doua proprietatii CSS prin care ii setez inaltimea maxima si cand rezultatul interogari array-ului este mai mare decat inaltimea maxima atunci proprietatea CSS overflow-y isi va face treaba la fiecare interogare.

Voi puteti ajusta acest script si puteti sa folosi un alt obiect (sa zicem un JSON) care sa stocheze informatia si sa tina loc de baza de date insa un array este mai usor de parcurs.