Completamento Automatico

**Rafio** · 22-08-2005, 15:28

Dove posso trovare uno Script per il completamento automatico dei nomi, cioè mano a mano che io scrivo le lettere mi compare il nome preso da un DB

**badaze** · 22-08-2005, 18:39

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>

**Rafio** · 23-08-2005, 08:44

Grazie ma non è proprio quello che mi serve. Io ho un database con più di 30.000 persone... così comparirebbe una lista interminabile.
Quello che cerco io è tipo questo:
Dati i nomi ROSSI MARIO, BIANCHI GIULIO, CELENTANO ETTORE, BRUNO MARCO.

Appena io in una text digito la lettera B in automatico la mia casella di testo si riempie con il primo nominativo del DB che inizia per B, in questo caso BIANCHI GIULIO.
Se poi continuo digitando R avrò:

NOME: BRUNO MARCO

**badaze** · 23-08-2005, 10:19

Che sia per cercare ROSSI MARIO o PINCO PALLINO il concetto è identico.

Se vuoi accedere ai dati del DB ad ogni digitazione dovrai per forza mandare dei dati tramite POST o GET per ricavare i dati e quindi darai l'impressione all'utente che la pagina sia in continuo ricaricamento.

Comunque è fattibile.

**Rafio** · 23-08-2005, 13:02

Si ma io non voglio vedere la lista delle persone, poi se clikki sulla lista la text non si riempie automaticamente quindi che utilià ha?
Lo scopo è far comparire quanto prima il nominativo della persona... cosa che potrebbe capitare già dopo aver digitato la 2 o la 3 lettera.

Scusa se insisto... ma ho fatto la stessa cosa in Visual Basic

, ma in ASP non si può fare... o meglio si può fare ma ad ogni lettera dovrei fare un Refresh della pagina, invece con uno Script non c'è bisogno di questo!

Grazie lo stesso!

**badaze** · 23-08-2005, 13:23

Originariamente inviato da Rafio
Si ma io non voglio vedere la lista delle persone, poi se clikki sulla lista la text non si riempie automaticamente quindi che utilià ha?
Lo scopo è far comparire quanto prima il nominativo della persona... cosa che potrebbe capitare già dopo aver digitato la 2 o la 3 lettera.

Scusa se insisto... ma ho fatto la stessa cosa in Visual Basic

, ma in ASP non si può fare... o meglio si può fare ma ad ogni lettera dovrei fare un Refresh della pagina, invece con uno Script non c'è bisogno di questo!

Grazie lo stesso!

Beh con un linguaggio client server è facile fare una cosa simile ( l'ho fatto anch'io con delphi tempo fa ) ma con un linguaggio internet non hai le stesse possibilità. Una possibilità è di avere i dati lato client il che non necessita accessi al server (vedere il mio esempio). Con uno script js non puoi accedere al db. Devi ricordare che il js viene eseguito sul client e non sul server e quindi i dati sfruttabili sono già presenti nella pagina.

**Rafio** · 23-08-2005, 13:50

Quindi in sostanza dici che dovrei al massimo posizionare tutti i nomi in una list non visibile nella mia pagina per fare questa cosa?
... quello che facevo prima con Visual Basic ora mi tocca farlo con JScript, VbScript, CSS, ASP, Store Procedure tutto insieme... che stress!
Comunque... se trovi qualcosa di interessante mi fai sapere?

Ciao e grazie ancora!

**badaze** · 23-08-2005, 13:59

Forse creando un file xml a partire dai tuoi dati. Quel file lo creeresti una volta per tutte (ovviamente dovresti ricrearlo ad ogni modifica dei dati) nella parte amministrazione del tuo sito.

**Rafio** · 23-08-2005, 14:10

Il problema è che è un DB che varia ogni giorno per non dire ogni minuto e la tabella principale contiene + di 30.000 records.

**pietro09** · 23-08-2005, 14:34

Il ho provato a farmi un DropDown a ricerca progressiva e sono giunto alle stesse conclusioni di badaze. Ossia, da server bisogna creare un vettore javascript ed è lì che viene fatta la ricerca. Ho provato con i comuni italiani, circa 8000 e funziona egregiamente.
Però, se la lista è più lunga, forse bisogna cambiare radicalmente aproccio.
Ad esempio, una bella pulsantiera da A a Z in modo da limitare la ricerca ai nomi inizianti con una certa lettera?

Discussione: Completamento Automatico

Strumenti discussione

Ricerca discussione

Visualizza

Completamento Automatico (InterActiveChange)

Permessi di invio