Efectuați cu ușurință un efect de căutare live

Efectul de căutare live nu este o noutate în aplicațiile desktop. În Mac OS X sau Windows Vista / 7, introduceți doar câteva litere într-o casetă de căutare, aproape instantaneu obțineți rezultatul căutării în zbor. A lovi butonul de prezentare devine veche.

Acest tutorial vă va arăta cum să aduceți acest efect cool lumii web cu jQuery. Codul utilizat în acest tutorial este modificat în baza abordării lui John Resig.

Efectul Livesearch în Windows 7

Efectul Livesearch în OS X

Caracteristici

Prezintă rezultatele căutării în zbor
Căutare fuzzy
Super Fast, fără apeluri AJAX

Pasul 1: HTML-ul

Pentru a începe, avem nevoie de câteva elemente html, printre care:

O intrare de text, în care introducem întrebările noastre.
O listă neordonată, pentru a afișa rezultatul căutării

... și două biblioteci javascript:

jQuery: Trebuie să știți cel puțin acest lucru pentru a finaliza acest tutorial.
Scorul Quicksilver: Acest script minunat imită faimosul algoritm QuickSilver livesearch pe Mac. Se spune dacă două șiruri de text sunt relevante și cât de relevante. Este ca un mini google într-un fișier js. Utilizatorii caută căutarea fuzzy, nu? Și toți le place rezultatele de căutare să arate de la cele mai relevante la cel mai mic. Datorită marii lucrări a lui Lachie Cox!

Nu în ultimul rând, avem nevoie de câteva elemente de căutare. În acest tutorial, să folosim numele multor cadre web ca date fictive, OK? (A se vedea lista acestor cadre)

Datele "căutare de la" pot fi furnizate în matrice, JSON-uri sau orice altă formă, atâta timp cât pot fi puse în javascript. Sunt disponibile și retele multidimensionale. Dar pentru ușurința demonstrației și a înțelegerii, datele folosite în acest tutorial reprezintă o simplă matrice unidimensională numită "elemente".

Și în cele din urmă, iată codul HTML. Acordați atenție unde sunt incluse cele două biblioteci JS. Notă: CSS nu este partea cheie a acestui efect, așa că nu vom petrece nici o secundă în stil. Sunt minificate. Sper că nu vă deranjează sau nu vă distrage atenția. Să ne concentrăm pe HTML și JS.

Salvați următorul cod într-un fișier html și începeți!

     jQuery Livesearch Effect     jQuery Livesearch Demo
 Găsiți-vă Cadrul Web preferat
  <-- Type in here and get search results LIVE!

Pasul 2: Firebug-ul este cel mai bun prieten al nostru!

Ca un tip de javascript, nu poți trăi fără Firebug astăzi. Este cu siguranta o necesitate pentru oricine lucreaza cu jQuery. Puteți finaliza acest tutorial fără a instala firebug. Dar cu firebug, suntem capabili să vedem o mulțime de chestii din spatele scenei, ceea ce este esențial pentru a înțelege chestiunea căutării în acest sens.

Amintiți-vă de articolele falsificate la care să căutați? Da, numele de cadre. Să verificăm dacă sunt în locul potrivit cu Firebug:

Deschideți fișierul HTML cu Firefox.
Deschideți Firebug și comutați la panoul "Console" (ctrl + shift + c).
Introduceți "elemente" (fără ghilimele) în caseta din dreapta și apăsați pe "Run".

Ar trebui să vedeți ceva prezentat în imaginea de mai jos. Firebug imprimă variabila "elemente" care este o matrice. Da, numele cadrului nostru sunt chiar acolo. Să mergem mai departe!

Pasul 3: Logica

Acum, să vorbim despre logică. Pentru ca acest efect să funcționeze, trebuie să apară o serie de lucruri:

Utilizatorul lovește o cheie.
Obținem textul căsuței de căutare. Să numim această "interogare".
Pentru fiecare nume de cadru, verificăm dacă interogarea este relevantă și cât de relevantă este.
Filtrează numele de cadre relevante și sortează-le pe baza relevanței.
Prezentăm rezultatul utilizatorului.

Ușor, nu? Cu excepția unui singur lucru. Dacă căut un cadru numit "tort", logica de mai sus rulează, un ciclu pe literă, 4 cicluri în total, nu? Dar primele 3 cicluri sunt complet inutile, doar pentru a reduce performanța într-un mod mare. Pentru a atenua acest lucru, vom aștepta până când utilizatorul nu va mai termina tastarea înainte de a trage logica noastră. Și dacă un utilizator oprește tastarea timp de 0,2 secunde, presupunem că se termină. În acest moment, logica noastră este destul de delicată. Este timpul să vă murdăriți mâinile și să începeți codarea!

Pasul 4: Ascultarea evenimentelor

În viața reală, ascultarea poate fi extrem de importantă. Acest lucru este valabil și în lumea jQuery, unde totul începe de la ascultarea unui eveniment.

Căutați "substituent" în fișierul HTML. Introduceți codul următor în locul respectiv.

Următorul cod ascultă evenimentul keyup. Aruncați-le între elee

Cod