Ammetto che trovare il titolo mi è costato quasi di più che scrivere il plugin; comunque: questo plugin per jQuery permette di trasformare una form di ricerca (o qualsiasi altra form simile) in modo da renderla di più immediato ed agile utilizzo secondo un paradigma che, lo ammetto, mi sono un po’ inventato io.
Il sistema parte dal presupposto che una form da modificare sia composta da:
- un campo di testo
- una lista di opzioni entro le quali cercare (devono essere radio button)
- un tasto di invio.
L’utente, normalmente, scrive il testo da cercare, seleziona tramite radio button dove vuole effettuare la ricerca (lo scope della stessa) e preme il pulsante. Questo plugin trasforma i radio button in una lista che apparirà direttamente sotto il campo di ricerca non appena il campo di input prenderà il focus. Una volta scritto il testo da cercare, l’utente potrà cliccare direttamente lo scope dentro la lista per effettuare la ricerca. Il plugin crea la lista in modo da essere anche navigabile da tastiera, tramite tab, in quanto tutti gli item sono costituiti da elementi A; così, per una massima velocità di utilizzo, si scrive il testo da cercare, si preme tab e poi invio.
Un paio di immagini dovrebbero chiarire meglio il concetto.
Questa è la form di “partenza”, senza il plugin attivo:
Una volta attivato il plugin, la form viene “collassata” in questa:
Una volta che il cursore di sia portato nel campo di ricerca, ecco cosa succederà:
I radio button sono stati trasformati in una pseudo select box a discesa, navigabile tramite tab o mouse (non sono attivi i tasti cursore, perché l’impegno necessario è forse troppo rispetto all’effettiva utilità del plugin).
La form di esempio è questa; si può osservare come si usa il plugin:
<html>
<head>
<title></title>
<link rel="stylesheet" href="lisearch.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="lisearch.js"></script>
<script type="text/javascript">
$(function() {
$('.scopes').lisearch();
});
</script>
</head>
<body>
<form>
<ul>
<li>
<label>Frase da cercare</label>
<input type="text" id="q" name="q">
</li>
<li id="scopes" class="scopes">
<input type="radio" name="scope" value="italia"><label>In italia</label>
<input type="radio" name="scope" value="europa"><label>In europa</label>
<input type="radio" name="scope" value="mondo"><label>Nel mondo</label>
</li>
<li><input type="submit" value="Cerca"></li>
</ul>
</form>
</body>
</html>
Insieme al plugin viene fornito un file CSS minimale che può servire per capire meglio gli elementi che vengono creati e dunque per poterli stilare. Ovviamente niente può sostituire Firebug, in questo contesto.
I test di funzionamento sono stati effettuati con jQuery 1.3.2 (l’ultimissima versione al momento in cui scrivo), ma credo che possa funzionare anche con versioni più vecchie.
Scarica il plugin oppure prova una demo
RSS
È online da qualche giorno il mio primo screencast pubblicato per thinkcode.tv. L’argomento è jQuery e nella lezioncina di un’oretta cerco di affrontare la maggior parte dei temi che possono interessare chi si avvicina per la prima volta a questa libreria. Sul sito è disponibile una preview di 5 minuti (presa circa ad un terzo della lunghezza totale del video).
