L'effetto di ricerca dal vivo non è una novità nelle app desktop. In Mac OS X o Windows Vista / 7, basta digitare poche lettere in una casella di ricerca, quasi istantaneamente si ottiene il risultato della ricerca al volo. Dovendo premere il pulsante di invio sta diventando vecchia scuola.

Questo tutorial ti mostrerà come portare questo fantastico effetto sul mondo web con jQuery. Il codice utilizzato in questo tutorial è modificato in base all'approccio di John Resig.

Effetto Livesearch in Windows 7

Effetto Livesearch in OS X

---

Caratteristiche

• Presenta risultati di ricerca al volo
• Ricerca sfocata
• Super veloce, nessuna chiamata AJAX

---

Passaggio 1: HTML

Per iniziare, abbiamo bisogno di alcuni elementi html tra cui:

• Un input di testo, in cui scriviamo le nostre domande.
• Una lista non ordinata, per mostrare il risultato della ricerca

... e due librerie javascript:

• jQuery: Dovrai almeno saperlo per completare questo tutorial.
• Quicksilver Score: Questo meraviglioso script simula il famoso algoritmo di ricerca della vita di Quicksilver su Mac. Indica se due stringhe di testo sono rilevanti e quanto rilevanti. È come un mini google in un file js. Gli utenti amano la ricerca fuzzy, giusto? E a tutti piacciono i risultati di ricerca mostrati dai più rilevanti ai meno. Grazie all'ottima opera di Lachie Cox!

Ultimo ma non meno importante, abbiamo bisogno di alcuni elementi da cui cercare. In questo tutorial, utilizziamo i nomi di molti framework Web come dati fittizi, OK? (Vedi l'elenco di questi quadri)

I dati di "ricerca-da" possono essere forniti in matrici, JSON o qualsiasi forma, purché possano essere inseriti in loop in javascript. Possono essere usati anche array multidimensionali. Ma per semplicità di dimostrazione e comprensione, i dati utilizzati in questo tutorial sono un semplice array unidimensionale chiamato "items".

E infine, ecco l'HTML. Fai attenzione a dove vengono incluse le due librerie JS. Nota: css non è la parte chiave di questo effetto, quindi non passeremo secondi sullo stile. Sono minimizzati. Spero che questo non ti infastidisca o ti distragga. Concentriamoci su HTML e JS.

Salva il seguente codice in un file html e iniziamo!

         
 
jQuery Livesearch Demo
 
Trova il tuo framework Web preferito
  <-- Type in here and get search results LIVE! 
 
      

---

Step 2: Firebug è il nostro migliore amico!

Come un utente javascript, non puoi vivere senza Firebug oggi. È sicuramente un must per chiunque lavori con jQuery. Puoi completare questo tutorial senza firebug installato. Ma con firebug, siamo in grado di vedere un sacco di cose dietro le quinte, che è essenziale per capire la ricerca in questo effetto.

Ricorda gli articoli fittizi da cui cercare? Sì, i nomi delle strutture. Controlliamo se sono nel posto giusto con Firebug:

1. Apri il file HTML con Firefox.
2. Apri Firebug e passa al pannello "Console" (ctrl + maiusc + c).
3. Digita "items" (senza virgolette) nella casella a destra e premi "Esegui".

Dovresti vedere qualcosa mostrato nell'immagine qui sotto. Firebug stampa la variabile "items" che è una matrice. Sì, i nostri nomi delle strutture sono proprio lì sul posto. Andiamo avanti!

---

Step 3: The Logic

Ora parliamo della logica. Per ottenere questo effetto funzionante, è necessario che si verifichi una sequenza di cose:

1. L'utente colpisce una chiave.
2. Otteniamo il testo della casella di ricerca. Chiamiamo questa "query".
3. Per ogni nome di framework, controlliamo se la query è pertinente e quanto è rilevante.
4. Filtriamo i nomi delle strutture rilevanti e li ordiniamo in base alla pertinenza.
5. Presentiamo il risultato all'utente.

Facile, hah? Tranne una cosa. Se cerco un quadro chiamato "torta", la logica di cui sopra funziona, un ciclo per lettera, 4 cicli in totale, giusto? Ma i primi 3 cicli sono completamente inutili, solo per ridurre le prestazioni in grande stile. Per mitigarlo, aspetteremo che l'utente interrompa la digitazione prima di attivare la nostra logica. E se un utente interrompe la digitazione per 0,2 secondi, supponiamo che finisca. A questo punto, la nostra logica è abbastanza delicata. È ora di sporcarsi le mani e iniziare a scrivere codice!

---

Passaggio 4: ascolto degli eventi

Nella vita reale, l'ascolto può essere estremamente importante. Questo è vero anche nel mondo di jQuery, dove tutto parte dall'ascolto di un evento.

Cerca "segnaposto" nel file HTML. Inserisci il seguente codice in quel luogo.

Il seguente codice ascolta l'evento keyup. Buttali tra ile