NB: ci sono novità al fondo del post

Pubblico le mie 3 implementazioni del plugin jQuery Autocomplete di Jörn Zaefferer.

Queste implementazioni servono ad attivare campi form con suggest automatico senza scrivere una sola riga di javascript.

La prima implementazione autoattiva il plugin originale (con supporto ai metadata):

La seconda implementazione aggiunge “magicamente” un campo “hidden” e in fase di invio del “form” spedisce al server anche la chiave associata al valore selezionato nel suggest.

La terza invece crea un suggest “tabellare”. E’ stato necessario modificare lo script.

Per le demo ho usato:

• jQuery 1.3.2
• jQuery Metadata
• jQuery Autocomplete 1.1

HEAD HTML

Includere le librerie e i css necessari.

	<link href="lib/jquery.autocomplete.css" rel="stylesheet" type="text/css" media="screen" />
	<script src="lib/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="lib/jquery.metadata.js" type="text/javascript"></script>
    <script src="lib/jquery.autocomplete.js" type="text/javascript"></script>
	<script src="autocomplete.custom.js" type="text/javascript"></script>

DOWNLOAD DEMO

SUGGEST BASE

Per attivare un suggest base è sufficiente

• assegnare al campo input la classe suggest.
• valorizzare l’attributo alt del campo input inserendo un url relativo es: “php/mesi.php”

Lo script php d’esempio che restituisce alle chiamate ajax l’elenco dei valori:

$q = strtolower($_GET["q"]);
if (!$q) return;
$items = array(
	'gennaio',
	'febbraio',
	'marzo',
	'aprile',
	'maggio',
	'giugno',
	'luglio',
	'agosto',
	'settembre',
	'ottobre',
	'novembre',
	'dicembre'
);

foreach ($items as $value) {
    if (strpos(strtolower($value), $q) !== false) {
        echo "$value\n";
    }
}

Chiaramente nelle applicazioni reali i dati non verranno presi da un array ma da un database

ESEMPIO 1

• DEMO

<input type="text" name="suggest1" id="suggest1" class="suggest" alt="php/mesi.php" />

ESEMPIO 2

Grazie all’uso di jQuery metadata le opzioni dell’autocomplete possono essere settate direttamente nell’html (quindi senza scrivere codice javascript).
L’elenco delle opzioni che modificano il comportamento del plugin si trova qui.

• DEMO

<input type="text" name="suggest2" id="suggest2" class="suggest {multiple:true}" alt="php/mesi.php" />

ESEMPIO 3

• DEMO

<input type="text" name="suggest3" id="suggest3" class="suggest {minChars:3, max:3}" alt="php/search.php" />

SUGGEST CHIAVE VALORE

La seconda implementazione di jQuery Autocomplete crea un campo hidden per la chiave legata al valore visualizzato in suggest in modo da poter inviare al server sia la chiave sia il valore in fase di submit.

Per attivare un suggest chiave/valore è sufficiente

• assegnare al campo input la classe suggest_keys.
• valorizzare l’attributo alt del campo input inserendo un url relativo es: “php/keys.php”

Lo script php d’esempio che restituisce alle chiamate ajax l’elenco di chiavi|valori:

$q = strtolower($_GET["q"]);
if (!$q) return;
$items = array(
	"10024" => "Moncalieri",
	"20000" => "Monza",
	"10100"	=> "Torino"
);

foreach ($items as $key=>$value) {
    if (strpos(strtolower($value), $q) !== false) {
        echo "$key|$value\n";
    }
}

ESEMPIO 4

• DEMO

<input type="text" name="suggest4" id="suggest4" class="suggest_keys" alt="php/keys.php" />

Se utilizzate firebug potrete vedere che viene creato un campo nascosto. Es:

<input type="hidden" value="" id="suggest4_hidden" name="suggest4_hidden"/>

ESEMPIO 5

• DEMO

<input type="text" name="entita[campo]" id="entita_campo" class="suggest_keys" alt="php/keys.php" />

Se utilizzate firebug potrete vedere che viene creato un campo nascosto. Es:

<input type="hidden" value="" id="entita_campo_hidden" name="entita[campo_hidden]"/>

SUGGEST TABELLARE

La terza implementazione di jQuery Autocomplete è un po’ più complessa e prevede l’utilizzo di una versione modificata di jquery autocomplete.

Per attivare un suggest tabellare è sufficiente

• Includere nell’head la versione modificata di jQuery Autocomplete
• assegnare al campo input la classe suggest_table.
• personalizzare le intestazioni di colonna nell’attributo class (vedi sotto l’esempio)
• valorizzare l’attributo alt del campo input inserendo un url relativo es: “php/table.php”
• Includere le seguenti istruzioni css personalizzando “le larghezze” che nell’esempio settano le 3 colonne della tabella

.ac_results ul li div.tbl{clear:both;}
.ac_results ul li div.tbl div{float:left;width:30%;overflow-x:hidden;}
.ac_intestazione{position:absolute;left:0px;top:-0px;z-index:1000;background:#000;color:#fff;}

/*PERSONALIZZA*/
.ac_results ul li div.tbl div.fld_1, #int_1{width:150px;}
.ac_results ul li div.tbl div.fld_2, #int_2{width:70px;}
.ac_results ul li div.tbl div.fld_3, #int_3{width:70px;}

Lo script php d’esempio che restituisce alle chiamate ajax l’elenco dei valori della tabella.

$q = strtolower($_GET["q"]);
if (!$q) return;
$items = array(
	"10024" => array(
		"Moncalieri",
		"Torino",
		"Piemonte"
	),
	"20000" => array(
		"Conegliano",
		"Treviso",
		"Veneto"
	),
	"10100"	=> array(
		"Alba",
		"Cuneo",
		"Piemonte"
	)
);

foreach ($items as $key=>$array) {
	$str = join($array,"#");
    if (strpos(strtolower($str), $q) !== false) {
        echo "$key|$str\n";
    }
}

ESEMPIO TABELLARE

• DEMO

<input type="text" id="suggest1" name="suggest1" class="suggest_table {th : ['città', 'provincia', 'regione']}" alt="php/table.php" style="width:300px;" />

AGGIORNAMENTO 13-11-2009:

Ho aggiornato lo ZIP con le demo e gli script di questo post.

Ho aggiornato in particolare

• jQuery Autocomplete “modificato”
• jQuery Autocomplete “custom”

Ho aggiunto questa DEMO per il passaggio delle opzioni autocomplete al plugin base (jquery.autocomplete.mod.js).

Le porzioni di jquery.autocomplete.js modificate sono a questo punto due, entrambe nel metodo/funzione fillList:

var li = $("<li/>").html( options.highlight(formatted, term) ).addClass(i%2 == 0 ? "ac_even" : "ac_odd").appendTo(list)[0];
//PATCH
if(i == 0 && $(input).is(".suggest_table")){
	$(li).addClass("ac_first");
	var _ie_sucks = typeof document.body.style.maxHeight === "undefined" || //IE6
					(document.all && !window.opera && window.XMLHttpRequest); //IE7
	if (_ie_sucks || max == 1) {
		$(li).attr("style", "padding-top:20px");
	}
}
//PATCH
$.data(li, "ac_data", data[i]);

listItems = list.find("li");
if ( options.selectFirst ) {
	//PATCH
	//listItems.slice(0, 1).addClass(CLASSES.ACTIVE);
	listItems.slice(1, 2).addClass(CLASSES.ACTIVE);
	//PATCH
	active = 0;
}

Per questa seconda modifica, ringrazio Mansportivo che nei commenti qui sotto mi ha segnalato l’anomalia.

Tagged autocomplete, javascript, jquery, suggest, tutorial