Ciao,
Ho realizzato l'autocompletamento per il campo descrizione nella pagina sotto.
In pratica non ho fatto altro che adattare il codice che ho trovato
in questo sito (non ho cambaito nemmeno il nome delle funzioni):
http://www.dhtmlgoodies.com/index.ht...x-dynamic-list
questa è la mia pagina in html:
ovviamente ho creato una tabella prodotti nel db con i campi id, codice, descrizione. Per il restocodice:<html> <head> <title>Form dati</title> <style type="text/css"> /* Big box with list of options */ #ajax_listOfOptions{ position:absolute; /* Never change this one */ width:175px; /* Width of box */ height:250px; /* Height of box */ overflow:auto; /* Scrolling features */ border:1px solid #317082; /* Dark green border */ background-color:#FFF; /* White background color */ text-align:left; font-size:0.9em; z-index:100; } #ajax_listOfOptions div{ /* General rule for both .optionDiv and .optionDivSelected */ margin:1px; padding:1px; cursor:pointer; font-size:0.9em; } #ajax_listOfOptions .optionDiv{ /* Div for each item in list */ } #ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */ background-color:#317082; color:#FFF; } #ajax_listOfOptions_iframe{ background-color:#F00; position:absolute; z-index:5; } form{ display:inline; } </style> <script type="text/javascript" src="js/ajax.js"></script> <script type="text/javascript" src="js/ajax-dynamic-list.js"></script> <SCRIPT LANGUAGE='JavaScript'> <!-- function validate_form() { if (document.art.codice.value==document.art.codice.defaultValue || document.art.codice.value.indexOf(' ',0)==0) { alert('\nNessun codice inserito.') document.art.codice.select() document.art.codice.focus() return false } if ((isNaN(document.art.codice.value)) || document.art.codice.value.indexOf('-',0)==0 || document.art.codice.value.indexOf('+',0)==0) { alert("Codice non valido."); document.art.codice.value = ""; document.art.codice.focus(); return false; } if (document.art.descrizione.value==document.art.descrizione.defaultValue || document.art.descrizione.value.indexOf(' ',0)==0) { alert('\nNessuna descrizione inserita.') document.art.descrizione.select() document.art.descrizione.focus() return false } if (document.art.quantita.value==document.art.quantita.defaultValue || document.art.quantita.value.indexOf(' ',0)==0) { alert('\nNessuna quantità inserita.') document.art.quantita.select() document.art.quantita.focus() return false } if (document.art.quantita.value.indexOf(',') >= 0){ alert("Per i decimali utilizzare il punto, es: 4 chili e mezzo= 4.5"); document.art.quantita.value = ""; document.art.quantita.focus(); return false; } if ((isNaN(document.art.quantita.value))|| document.art.quantita.value.indexOf('-',0)==0 || document.art.quantita.value.indexOf('+',0)==0) { alert("Quantità non valida."); document.art.quantita.value = ""; document.art.quantita.focus(); return false; } if (document.art.prezzo.value==document.art.prezzo.defaultValue || document.art.prezzo.value.indexOf(' ',0)==0) { alert('\nNessun prezzo inserito.') document.art.prezzo.select() document.art.prezzo.focus() return false } if (document.art.prezzo.value.indexOf(',') >= 0){ alert("Per i decimali utilizzare il punto, es: 3 euro e 55 cent = 3.55"); document.art.prezzo.value = ""; document.art.prezzo.focus(); return false; } if ((isNaN(document.art.prezzo.value))|| document.art.prezzo.value.indexOf('-',0)==0 || document.art.prezzo.value.indexOf('+',0)==0) { alert("Prezzo non valido."); document.art.prezzo.value = ""; document.art.prezzo.focus(); return false; } } //---------------------------------------- // --> </SCRIPT> </head> <body bgcolor="#DAB88B" onload="document.art.codice.focus();" > <TABLE border=0 width=100% cellpadding=3> <tr> <td width=100% colspan=2> <p align=center>Inserisci Articoli <form method=POST action="fatt1.php" target= "fatt1" name = "art" onSubmit="return validate_form()"> </td> </tr> <tr> <td width=18%>Codice</td> <td width=82%><input type=text name="codice" size=10></td> </tr> <tr> <td width=18%>Descrizione</td> <td width=72%><input type="text" name="descrizione" value="" onkeyup="ajax_showOptions(this,'getCountriesByLetters',event)"> </td> </tr> <tr> <td width=18%>[b]Quantità</td> <td width=82%><input type=text name="quantita" size=10></td> </tr> <tr> <td width=18%>[b]Prezzo Un.</td> <td width=82%><input type=text name="prezzo" size=10></td> </tr> <tr> <tr> <td width=18%>[b]IVA</td> <td width=82%><select size="1" name="iva" size=10> <option> 4</option> <option> 10</option> </select></td> </tr> <tr> <td width=18%>[b]<input type="submit" name="invia" value="Inserisci"></td> </tr> </table> </form> </body> </html>
ho usato gli stessi file di riferimento in js e php.
Il codice funziona, e il campo descrizione si autocompleta del nome del prodotto relativamente
alle lettere che tasto.
Vorrei adesso, se possibile, implementare il form.
In pratica vorrei fare in modo che se inserisco il codice del prodotto automaticamente sia inserito anche il nome del prodotto ad esso associato nel campo descrizione e viceversa
se inserisco il nome del prodotto nel campo descrizione (autocompletato con ajax) sia
inserito nel campo codice il codice relativo.
Se non è possibile o è troppo complicata la cosa vorrei almeno ottenere quello che
è possibile vedere in questa pagina:
http://demo.script.aculo.us/ajax/aut...ter_customized
dove nel campo "to" inserendo le iniziali del nome "a" ad esempio viene richiamato nel menu a discesa tra gli altri con la stessa iniziale il nome "ada noel" e sotto in grigietto il suo indirizzo email che non viene inserito nel campo ma visualizzato come suggerimento.
Beh, se non è possibile realizzare la mia prima richiesta vorrei almeno riuscire a fare questo:
Visualizzare il codice come "suggerimento".
Il codice della pagina sembra essere in asp (oltre a js credo) ma io non lo conosco e dovrei usare il php.
Potete aiutarmi?
Grazie
Rispondi quotando
