Devi estrarre i dati dal db e comporre un array js come nel mio esempio.
Funziona solo su IE
Digita le lettere e se vuoi selezionare il nome in cima alla lista schiaccia Invio.
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.hidden {position:absolute;left:-1000;top:-1000;background-color:yellow}
-->
</style>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
var arrNomi = new Array();
i = 0;
// Parte da comporre con un linguaggio lato server
arrNomi[i++] = 'Adda';
arrNomi[i++] = 'Adelina';
arrNomi[i++] = 'Anna';
arrNomi[i++] = 'Annalisa';
arrNomi[i++] = 'Annamaria';
arrNomi[i++] = 'Bruna';
arrNomi[i++] = 'Brunilde';
arrNomi[i++] = 'Bruno';
arrNomi[i++] = 'Carla';
arrNomi[i++] = 'Carlino';
arrNomi[i++] = 'Carlo';
arrNomi[i++] = 'Carlomagno';
arrNomi[i++] = 'Carlomaria';
arrNomi[i++] = 'Cirio';
arrNomi[i++] = 'Claudio';
arrNomi[i++] = 'Domenico';
arrNomi[i++] = 'Domizia';
arrNomi[i++] = 'Domizio';
// Fine Parte da comporre con un linguaggio lato server
var first = '';
function scanNomi() {
//---------- Azzero il contenuto del div
document.getElementById('listaNomi').innerHTML = '';
document.getElementById('listaNomi').style.left = -1000;
document.getElementById('listaNomi').style.top = -1000;
if (event.keyCode != 8 && event.keyCode != 13) {
//-------- Se il tasto non è Delete nè Invio: aggiungo il codice ASCII del tasto premuto
// al valore già immesso
a = document.getElementById('nome').value+String.fromCharCode(event.keyCode);
} else {
if (event.keyCode != 13) {
//-------- Se il tasto non è Invio: uso il valore immesso
a = document.getElementById('nome').value;
} else {
//-------- Se il tasto è Invio: uso il valore della variabile first ed esco
document.getElementById('nome').value = first;
return;
} // if (event.keyCode != 13)
} // if (event.keyCode != 8)
//-------- Se non c'è nessun valore immesso : esco
if (a == '') {
first = '';
return;
} // if (a == '')
//-------- Maiuscole per il confronto
a = a.toUpperCase( );
//-------- Prendero' tutti i nomi che cominciano con il valore immesso
pattern = '^('+a+')';
//-------- Ciclo sull'array dei nomi e prendo tutti i nomi che cominciano con
// il valore immesso
j = arrNomi.length;
ok = true;
for (i=0;i<j;i++) {
b = arrNomi[i];
b = b.toUpperCase( );
if (b.match(pattern)) {
if (ok) {
ok = false;
first = arrNomi[i];
} // if (ok)
curNome = arrNomi[i];
//curNome = curNome.replace(pattern,'$1');
document.getElementById('listaNomi').innerHTML += curNome + '
';
} // if (b.match(pattern))
} // for (i=0;i<j;i++)
//--------- Se almeno un nome è stato inserito : calcolo la posizione del div
// per mostrare i dati
if (document.getElementById('listaNomi').innerHTML != '') {
divLeft = document.getElementById('nome').offsetLeft;
divTop = document.getElementById('nome').offsetTop + document.getElementById('nome').offsetHeight;
document.getElementById('listaNomi').style.left = divLeft;
document.getElementById('listaNomi').style.top = divTop;
document.getElementById('listaNomi').style.width = document.getElementById('nome').offsetWidth;
} // if (document.getElementById('listaNomi').innerHTML != '')
} //
//-->
</script>
Nome : <input type="text" id="nome" onkeypress="scanNomi()" />
<div id="listaNomi" class="hidden">
</div>
</body>
</html>