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.
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>
Copincollatelo!
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