Realizzare una “Instant Search” in AJAX

inserito nella categorie: AJAX, Javascript, PHP

marchiato con i tag: ajax, algoritmi, google, instant, instantanea, itunes, javascript, php, ricerca, search

La instant search è oramai cosa vecchia nei software, basti pensare a iTunes 6.0 che già implementava la ricerca rapida nel proprio motore.
Ultimamente però, con l’aumentare della velocità delle connessioni internet, si sta sviluppando in maniera sempre più vasta sul web, vedi Google Instant.
Oggi vi spiegherò come realizzarla sul vostro sito web.
L’occorrente è: un server web Apache con PHP.
Quando mi son cimentato nell’impresa, non pensavo ad AJAX. La prima cosa che mi è passata per la mente è stata: prelevo i dati con qualsiasi tecnologia, quindi filtro i dati con Javascript, aggiungendo o rimuovendo elementi dal DOM in base ad una match di una stringa.
Provate a realizzarlo: a meno che non abbiate un computer e un browser tanto potente da processare una gran mole di dati in tempo reale, avrete inevitabilmente un bloccaggio del browser: l’unica cosa da fare è usare il server web per matchare i dati, quindi bisogna utilizzare necessariamente AJAX.
In questo esempio utilizzerò il framework di jQuery per avere una maggiore portabilità e semplicità del codice, e realizzerò una instant search di file.

Bene, iniziamo: nella nostra directory abbiamo 3 file:
index.html (o php), ajax.php, script.js.
Nella index.html inseriremo la “parte grafica” dell’applicazione, che attraverso script.js si interfaccierà con il core del software ajax.php che farà le richieste in tempo reale al server.

Vediamo subito il codice della index.htm:

Ovviamente è una index alquanto scarna, da personalizzare via CSS.

Ora vediamo il codice core, la ajax.php:

Lo script leggerà tutti i file nella direcory corrente e listerà solo i file che matchano il pattern definito nella variabile q.

Ora vediamo l’interfaccia javascript:

Semplice, no?
Una migliore interfaccia, ma ancora in fase beta, potrebbe essere settare un setTimeout sull’handle keyup della inputbox ed evitare di fare richieste finchè l’utente sta scrivendo, ovvero finche la stringa precedente nella inputbox è diverso dalla precedente prima di 200/150 ms.