Autocompletar Campos de Manera Local Buenas Tardes a todos
Estoy empezando a hacer mis primeras practicas en AJAX, esta vez a cerca de completar campos de texto de forma local, el problema radica en que he tenido problemas con IE 7 al escribir algo en el campo de texto que utiliza el autocompletado. me dice error 'style' is null or not an object , linea 2272 Caracter 5
y le doy aceptar y me muestra la sugerencia de autocompletado en base a lo que escribí.
En Firefox este ejemplo funciona perfectamente. Ojalá me puedan orientar en esto se los agradeceria mucho. el codigo es el siguiente:
Formulario.Html
<!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>Formulario de Registro de Usuarios</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="AjaxLib.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="formulario.js"></script>
<link href="formulario.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<form id="formRegistro">
<div class="filaCampo">
<div class="etiqueta">Nombre de Usuario: </div>
<div class="campo"><input type="text" id="txtUsuario" /></div>
</div>
<div class="filaCampo">
<div class="etiqueta">Nombre: </div>
<div class="campo"><input type="text" id="txtNombre" /></div>
</div>
<div class="filaCampo">
<div class="etiqueta">Apellido: </div>
<div class="campo"><input type="text" id="txtApellido" /></div>
</div>
<div class="filaCampo">
<div class="etiqueta">Dirección E-mail: </div>
<div class="campo"><input type="text" id="txtEmail" /></div>
</div>
<div class="filaCampo">
<div class="etiqueta">Dirección Postal: </div>
<div class="campo">
<input name="text" type="text" id="txtDireccion" />
</div>
</div>
<div class="filaCampo">
<div class="etiqueta">Localidad: </div>
<div class="campo"><input type="text" id="txtLocalidad" autocomplete = "false"/></div><br />
<div class="autocomplete" id="autocompleteLocalidad"></div>
</div><br /><br />
<div class="filaCampo">
<div class="etiqueta">País: </div>
<div class="campo"><select id="lstPais"></select></div>
</div>
<div class="filaCampo">
<div class="etiqueta">Provincia: </div>
<div class="campo"><select id="lstProvincia"></select></div>
</div>
<div class="filaCampo">
<div class="etiqueta">Edad: </div>
<div class="campo"><input type="text" id="txtEdad" /></div>
</div>
<div class="filaCampo">
<div class="etiqueta">Nivel Educativo: </div>
<div class="campo"><div id="nivelEducativo"></div></div>
</div>
<div class="filaCampo">
<div class="etiqueta">Fecha de Inicio Deseada: </div>
<div class="campo"><input type="text" id="txtFechaInicio" /></div>
</div>
<div class="filaCampo">
<div class="etiqueta">Cursos en Orden: </div>
<div class="campo"><div id="cursos"></div></div>
</div>
<input type="button" id="btnRegistrar" value="Registrar Usuario" />
</form>
</body>
</html>
Formulario.Css
body {
font-family: Arial, Helvetica, sans-serif;
}
input {
border: 1px #888 solid;
}
#formRegistro {
width: 500px;
border: 1px #666666 solid;
background: #eeb;
padding: 15px;
}
.filaCampo {
padding: 2px;
height: 25px;
}
.etiqueta {
width: 40%;
float: left;
}
.campo {
width: 60%;
float: right;
}
div.autocomplete{
position:absolute;
width:145px;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
top: 205px;
height: 14px;
left: 228px;
/*list-style-type:none;*/
}
div.autocomplete ul {
list-style-type:none;
margin:0px;
padding:0px;
}
div.autocomplete ul li{
background-color:#ffb;
}
div.autocomplete ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
height:24px;
cursor:pointer;
}
Formulario.js
window.onload = function() {
var localidades = ["Alabama", "Brasilia", "Barcelona", "Buenos Aires", "Colonia", "Cordoba", "Madrid", "Mendoza", "Mexico DF"];
$("autocompleteLocalidad").className = "autocomplete";
new Autocompleter.Local("txtLocalidad", "autocompleteLocalidad", localidades,{frequency: 0.8, partialChars: 4, fullSearch: true});
}
Este ejemplo lo tome de un libro que compre esta muy bueno se los recomiendo www.libroajax.com.Trato de implementarlo paro no se que pueda estar haciendo mal para que no funcione en IE 7.
De antemano agradezco sus aportaciones. Saludos.
