Creare un textbox con autocompletamento

Immagini

La diffusione delle tecniche tipiche del Web 2.0 ha permesso agli sviluppatori di costruire interfacce contemporaneamente semplici ed efficaci migliorando l’esperienza utente anche sotto l’aspetto della fruizione dei contenuti. A chiunque è capitato almeno una volta di imbattersi in un textbox “intelligente”, capace di suggerire dei termini in base ad alcuni caratteri digitati. Un esempio su tutti è quello di Google Suggest http://www.google.com/webhp?complete=1&hl=en. Una casella di testo di questo tipo, oltre a velocizzare le operazioni, permette di evitare inutili ricerche prive di risultati interessanti, in altre parole consente di realizzare esperienze interattive intuitive ed appaganti. Nel seguente articolo mostrerò come creare un textbox con autocompletamento in Javascript, in particolare con l’ausilio della libreria jQuery http://jquery.com/. Il risultato finale è riportato nello screenshot: (Immagine 1)
Innanzitutto è importante fissare i passaggi chiave dell’applicazione:

- Intercettazione dei caratteri digitati dall’utente.
- Richiesta asincrona al server e relativa risposta in formato XML.
- Costruzione della lista dei suggerimenti.
- Gestione dell’interazione utente con tale lista.

È necessario premettere che lo script fa uso di una pagina lato server (.NET nello specifico) che, opportunamente interrogata, restituisce una lista di suggerimenti in formato XML. Tale pagina non sarà oggetto di studio in questa trattazione, ci limiteremo a prendere in considerazione la struttura del file restituito, che è la seguente:

<items>
<item>Andorra</item>
<item>Angola</item>
<item>Anguilla</item>
<item>Antarctica</item>
<item>Antigua and Barbuda</item>
</items>

A questo punto possiamo cominciare e la prima operazione consiste nel creare una pagina XHTML contente gli elementi necessari:

<input id=”q” type=”text” />
<div id=”suggest” />

Il primo è il campo di testo in cui l’utente digiterà i caratteri desiderati e il secondo è un generico elemento in cui andremo ad inserire la lista dei suggerimenti ottenuta dal server. Successivamente è necessario creare una classe CSS così composta:

div#suggest ul li.selected {
background-color:#ccc;
}

Essa definisce lo stile di uno degli elementi di maggior rilievo di questo articolo. La classe selected ha, infatti, il compito di identificare, se esiste, l’elemento selezionato nella lista dei suggerimenti. Naturalmente lo stile può essere adattato al layout della vostra web application, nello specifico ho utilizzato uno sfondo grigio. È giunto il momento di passare in rassegna le principali funzioni Javascript sulle quali ci appoggeremo:

function select(element) {
if (element.is(“li”)) {
$(“li.selected”, “#suggest”).removeClass(“selected”);
element.addClass(“selected”);
}
}
function setText() {
$(“#q”).val($(“li.selected”, “#suggest”).text());
clear();
}
function clear() {
$(“#suggest”).empty();
$(“#suggest”).hide();
}
function cancelEvent(e) {
if (!e) {
e = window.event;
}
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}

La funzione select ci permette di assegnare ad un elemento (in particolare ad un "

$(function() {
$(“#q”).attr(“autocomplete”, “off”);
clear();

$(“#q”).keydown( function(e) {
var selected;
var input = $(this);
if ($(“*”).index($(“li.selected”, “#suggest”)[0]) >= 0) {
selected = $(“li.selected”, “#suggest”);
} else {
selected = null;
}

switch(e.keyCode) {
case 13:
cancelEvent(e);
if (selected) {
setText();
}
break;

case 38:
cancelEvent(e);
if (selected) {
select(selected.prev());
}
break;
case 40:
cancelEvent(e);
if (selected) {
select(selected.next());
} else {
$(“li”, “#suggest”).eq(0).addClass(“selected”);
}
break;

default:
timeout = setTimeout(function() {
if (input.val().length >= 1) {
$(“#suggest”).show();
$(“#suggest”).html(“<img src=’images/ajax-loader.gif’ alt=’’ />”);
$.get(“data.aspx?q=” + input.val(), function(data) {
$(“#suggest”).html(“<ul>”);
$(“item”, data).each(function(i) {
var li = document.createElement(“li”);
$(li).html($(this).text());
$(“ul”, “#suggest”).append(li);
$(li).mouseover(function() {
select($(this));
});
$(li).click(function() {
setText();
});
});
});
} else {
clear();
}
}, 300);
break;
}
});
});