Sto cercando di ricreare con JavaScript la funzionalità di completamento automatico.
Un campo di input deve contenere il nome di uno dei contatti presenti nel database.
Non conoscendo Ajax e non essendo in grado di fare un confronto in tempo reale con il database ho deciso di stampare tramite PHP l'array JavaScript che contiene tutti i nomi e faccio il confronto con quello sfruttando l'evento keypress del campo di input.
L'idea direi che sia giusta ma incontro varie difficoltà nell'implementazione viste le scarse conoscenze di programmazione client-side.
Copincollatelo!codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Riempimento automatico</title> <style type="text/css"> table.day { float: left; margin-right: 10px; font-size: 100%; } table.day td.hours { width: 35px; text-align: center; line-height: 2; vertical-align: top; } table.day form { margin: 0; padding: 0; } table.day input { display: block; border-width: 0 0 1px 0; border-style: solid; border-color: #ccc; font-size: 80%; } table.day input#onfocus { border-width: 1px 1px 0 1px; border-style: solid; border-color: #ccc; background: #ffd; } table.day input#onblur { border-width: 0 0 1px 0; border-style: solid; border-color: #ccc; background: #fff; } ul#autComp { margin: -2px 0 0 0; padding: 0; position: absolute; border: 1px solid #ccc; width: 150px; height: 100px; overflow: auto; background: #eee; font-size: 80%; } ul#autComp li { padding: 0 2px; list-style-type: none; } ul#autComp li.selected { background: #900; cursor: pointer; color: #fff; } ul#autComp li.unselected { background: #eee; color: #000; } /* Stili generici */ body { background: #ccc; font: 70% verdana, arial, sans-serif; } #container { margin: 0 auto; border-width: 0 3px 1px 3px; border-style: solid; border-color: #bbb; background: #fff; padding: 5px; width: 974px; } input, textarea, select { font: 11px verdana, arial, helvetica, sans-serif; } textarea { overflow: auto; } img { border: 0; } form div { margin: 5px 0; } hr { clear: left; visibility: hidden; } </style> <script type="text/javascript"> window.onload = function () { autComp (); } var clients = new Array (); clients[0] = 'Astone Martino'; clients[1] = 'Astuccio Fulvio'; clients[2] = 'Barlini Francesco'; clients[3] = 'Catto Luca'; clients[4] = 'De Beneditti Loredana'; clients[5] = 'Essiona Umberto'; clients[6] = 'Federici Guidalberto'; clients[7] = 'Ganci Massimiliano'; clients[8] = 'Imbertini Aldo'; clients[9] = 'Lucazzoni Auro'; clients[10] = 'Mazzoleni Davide'; clients[11] = 'Noevali Sergio'; function autComp () { var textFields = document.getElementById('week').getElementsByTagName('INPUT'); appendUl = false; for (var i = 0; i < textFields.length; i++) { if (textFields[i].className == 'client') { textFields[i].onkeypress = function () { var ul = document.createElement ('UL'); ul.setAttribute ('id', 'autComp'); for (var z = 0; z < clients.length; z++) { if (this.value.length > 0 && clients[z].toLowerCase().indexOf(this.value.toLowerCase()) == 0) { if (!appendUl) appendUl = true; var li = document.createElement('LI'); li.appendChild(document.createTextNode (clients[z])); li.onmouseover = function () { this.className = 'selected'; } li.onmouseout = function () { this.className = 'unselected'; } li.ref = this; li.onclick = function () { this.ref.value = this.firstChild.nodeValue; this.parentNode.style.display = 'none'; } ul.appendChild(li); } } if (appendUl) { this.parentNode.appendChild(ul); appendUl = false; } } } } } </script> </head> <body><div id="container"> <div id="week"> <table cellspacing="0" class="day"> <caption>Lunedì <span>1</span> Gennaio</caption> <tr> <td class="hours"> <span>08,30[img]edit.png[/img]</span> </td> <td class="appointmnt"> <form method="post" action=""> <div><input type="text" class="client" /></div> <div><input type="text" class="notes" /></div> </form> </td> </tr> </table> <table cellspacing="0" class="day"> <caption>Martedì <span>2</span> Gennaio</caption> <tr> <td class="hours"> <span>08,30[img]edit.png[/img]</span> </td> <td class="appointmnt"> <form method="post" action=""> <div><input type="text" class="client" /></div> <div><input type="text" class="notes" /></div> </form> </td> </tr> </table> </div> <hr /> </div></body> </html>
Sono arrivato fin qui, qualcosa funziona ma sono di più i problemi che non riesco a risovere.
[list=1][*]quando l'operatore clicca sul nominativo la lista dovrebbe sparire invece non lo fa perché (ritengo) si è duplicata ad ogni pressione di tasto. Devo quindi cliccare per tutte le volte che si è duplicata prima di vederla sparire: dovrei impedire che l'elemento ul inserito dinamicamente si duplichi.[*]quando la funzione lanciata all'onkeypress non trova più riscontri (se digito "Ast" e non sono presenti nomi che comincino con queste tre lettere), la lista che era comparsa dovrebbe sparire.[/list=1]
Se qualcuno mi desse una mano a completare gli sarei grato
Rispondi quotando
