INTERFETE 2 WEB

Client-side highlighting in interfete web


by  interfete   2   web


Highlighting in interfete web

 

Aplicatie JavaScript folositoare in interfetele web ale aplicatiilor web

 

Pentru a realiza o interfata web user user-friendly adaugati aplicatiei web search cu highlight pe text. Se realizeza un script JavaScript care sa extraga termeni de cautare dintr-o pagina HTML si sa ii marcheze vizual (similar cu functionalitatea google)

In acest scop, aplicatia web foloseste o pagina HTML cu un formular in care se vor introduce termenii de cautare si numele fisierului HTML in care se va efectua cautarea cu highlight pe text (alt fisier HTML pe acelasi server). Se adauga intefetei web un buton de search, la apasarea caruia, se afiseaza in aceeasi pagina cu formularul, intregul text din fisierul selectat anterior avand termenii de cautare highlighted. Formularul va ramane vizibil in aplicatia web, permitand o noua cautare cu highlight pe text.

 

 

Detalii

 

 

Formularul din aplicatia web contine doua campuri: unul in care se introduce textul de cautat si altul in care se scrie sursa unde se cauta. S-au adaugat interfetei web doua butoane:

  • Exact search, care cauta exact textul introdus, fara a separa cuvintele, si fara a tine cont de litere mari/mici;  

  • Individual search, care cauta separat cuvintele din textul introdus si face highlight diferit, fara a tine cont de litere mari/mici. 

     

    • Ca separatori pentru cuvintele din textul introdus pentru cautare s-au considerat: " :;,." 

La apasarea butonului "Exact Search"/"Individual Search" se apeleaza functia de Javascript xmlhttpPost(cuv, strURL, mode) avand ca parametrii cuv: textul care se cauta (introdus in primul camp al formularului), strURL: pagina HTML in care se cauta (introdusa in campul al doilea al formularului), mode: daca se apasa pe "Exact Search" se trimite mode-ul 1, altfel se trimite mode-ul 2. Functia incarca o pagina de pe acelasi server, folosind AJAX. Dupa ce se obtine response de la server, se apeleaza functia de cautare si de colorare globalreplace(str, txt, mode), cu parametrii str: textul care se cauta, txt: textul in care se cauta (response-ul de la server) si mode: 1/2 in functie de tipul de cautare.

 

Functia globalreplace( str, txt, mode) cauta in txt cuvintele din str, folosind expresii regulate. Replace-ul se face global si fara a tine cont de litere mari/ mici, expresia regulata continand "gi". Cuvintele gasite sunt inlocuite cu valoarea expresiei regulate, dar intre tagurile <span style="background-color:yellow"> sau alta culoare de forma "#RRGGBB".

Pentru colorarea diferita, in cazul in cace se apasa butonul "Individual Search" am retinut intr-un string colorstr, care este split-uit dupa " ", obtinandu-se array-ul ce contine ca elemente culori de forma "#RRGGBB". Se incrementeaza la fiecare cuvant din str un index care inainteaza prin vectorul de culori. Cand s-a ajung la dimensiunea maxima a array-ului, index-ul ramane constant, adica se va face highlight in continuare cu ultima culoare din array.

 

Functia de cautare si highlight intoarce intregul continut al paginii pe care se cauta, modificat, highlight-at si este pus intr-un <div> cu id="result" in pagina care contine formularul.

Jocuri
Free Web Hosting