<style type="text/css">
.box{
	font: 10px verdana;
	background: #fef2c5;
	border: 1px solid #999;
}
</style>

<form action="" id="formulario">
	<fieldset>
		<legend>Preenchimento dinmico</legend>
		<label for="nome">Nome</label>
		<input autocomplete="0" type="text" name="nome" id="nome" />
		<input type="button" name="nome_complete" value="AutoComplete.Show()" />
		<br />
		<label for="tel">Telefone</label>
		<input autocomplete="0" type="text" name="tel" id="tel" />
	</fieldset>
</form>
<br style="clear:both;" />
<span id="label"></span>

<script type="text/javascript">
//<![CDATA[

var nomes = ["Armindo", "Arminda", "Armando", "Arlindo", "Benedito", "Diana", "Tio", "Vanessa"];
var telefones = ["4221 0339", "4548 0813", "4548 1225", "4665 0056", "4665 0636", "4665 0037", "2236 0106", "2236 0533"];

var code = new AutoComplete("formulario");
//code.ignoreAccents = false;
//code.matchExact = false;
code.addField("nome", nomes, "box");
code.addField("tel", telefones);
code.onSelect = function(i){
	//alert(this.options[i].text);
}
code.onShow = function(f){
	document.getElementById("label").innerHTML += "SHOW = " + f.name + "<br />";
}
code.onHide = function(f){
	document.getElementById("label").innerHTML += "HIDE = " + f.name + "<br />";
}
document.forms.formulario.nome_complete.onclick = function(){
	code.filter(this.form.nome), code.show(this.form.nome);
}
document.getElementById("label").innerHTML = "<b>Nomes:</b><br />" + nomes.join("<br />") + "<br /><br />" + "<b>Telefones:</b><br />" + telefones.join("<br />");

//]]>
</script>