Estas son las funciones que he usado:
Este es el formularo donde se muestra el input donde escribe el usuario y se debe de mostrar el autocomplete en el div.
Código HTML:
<form name="formasigpriv" method="post">
<table width="85%" align="center">
<tr height="60">
<td class="impacto"><?php echo htmlentities(USUARIO) ?>:</td>
<td><input type="text" id="usuario" name="usuario" size="50" onblur="ocultarautocomplete()" onKeyUp="autocompletar()"><div id="autocomplete"></div></td>
</tr>
<tr height="60">
<td class="impacto"><?php echo htmlentities(TIPOPRIV) ?>:</td>
<td>
<select name="tipopriv" id="tipopriv">
<?php
......relleno el select...
?>
</select>
</td>
</tr>
<tr><td> </td></tr>
<tr>
<td colspan="2" align="center"><input type="button" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" value="<?php echo htmlentities(ASIGPRIV) ?>" onClick="asignarPrivilegios()"></td>
</tr>
</table>
</form>
Esta es la funcion php que recupera de la base de datos y escribe en el div
Código PHP:
include("../cabecera.php");
$texto = $_POST["texto"];
$crit = $_POST["crit"];
if ($crit == "apellidos")
$query = "SELECT usuario AS salida FROM usuarios WHERE usuario LIKE '". utf8_decode($_POST["texto"]) . "%'";
else
$query = "SELECT CONCAT(apellidos, ', ', nombre) AS salida FROM usuarios WHERE CONCAT(apellidos, ', ', nombre) LIKE '" . utf8_decode($_POST["texto"]) . "%'";
$resultado = mysql_query ($query);
while ($fila = mysql_fetch_array($resultado))
echo "<div><a href='javascript:completarNombre(\"" . htmlentities($fila["salida"]) . "\")'>" . htmlentities($fila["salida"]) . "</a></div>\n";
esta son las funciones javascrip que trabajan para el autocomplete, la primera oculta el div, la segunda realiza la a peticion a la base de datos, la otra lo coloca en el sitio correcto y la ultima es para cuando hagamos click en el rato en alguno de los datos del div se copie al input.
Código:
function ocultarautocomplete(){
var comp = document.getElementById('autocomplete');
comp.style.visibility = "hidden";
}
function autocompletar()
{
var comp = document.getElementById('autocomplete');
var textbox = document.getElementById('usuario');
if (document.getElementById('buscarporape').checked == true)
var crit = "usuario";
else
var crit = "apellidos";
if (textbox.value == ""){
comp.style.visibility = "hidden";
}
else {
colocarAutocomplete();
var ajax = nuevoAjax();
ajax.open("POST","auxi/autocomplete.php",true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function() {
if (ajax.readyState == 4){
if (ajax.responseText == "")
comp.style.visibility = "hidden";
else{
comp.innerHTML = ajax.responseText;
comp.style.visibility = "visible";
}
}
}
ajax.send("texto=" + textbox.value + "&crit=" + crit);
}
}
function colocarAutocomplete(){
var comp = document.getElementById('autocomplete');
var textbox = document.getElementById('usuario');
var oNode = textbox;
var iLeft = 0;
var iTop = 0;
while(oNode.tagName != "BODY") {
iLeft += oNode.offsetLeft;
iTop += oNode.offsetTop;
oNode = oNode.offsetParent;
}
comp.style.left = iLeft;
comp.style.top = iTop + textbox.offsetHeight;
comp.style.width = textbox.offsetWidth;
}
function completarNombre(nombre){
var comp = document.getElementById('autocomplete');
var textbox = document.getElementById('usuario');
textbox.value = nombre;
comp.style.visibility = "hidden";
}
Siento la parrafada, seguro que hay formas mas elegantes de hacerlo, pero...
Muchas gracias, te agradezco la ayuda!!