Hola a todos, estoy intentando hacer un autocompletar muy sencillo, en el que muestro todos los usuarios de una base de datos cuyo nombre comience por el conjunto de caracteres que introduzco.
Hay algo que está impidiendo que funcione, he puesto muchos alerts enn el código y lo he revisado una y otra vez y no consigo ver donde estoy metiendo la pata.
Es un código bastante sencillo, así que no creo que alguien con conocimientos superiores a los míos,(cosa que no es difícil
), se dé cuenta rápido del error que estoy cometiendo.
El código es el siguiente:
rpc.php Código PHP:
<?php
include("../conexion.php");
if(isset($_POST['queryString'])){
$queryString = $_POST['queryString'];
if(strlen($queryString) >0){
$query = "SELECT idUsuario FROM T_Usuarios WHERE idUsuario LIKE '$queryString%' LIMIT 10";
$result = mssql_query($query) or die("There is an error in database please contact [email protected]");
while($row = mssql_fetch_array($result))
echo '<li onClick="fill(\''.$row[idUsuario].'\');">'.$row[idUsuario].'</li>';
}
}
?> Jquery_autocomplete_with_php_mysql.php Código PHP:
<!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=utf-8" />
<title>Ajax Auto Suggest</title>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
</style>
</head>
<body>
<div>
<form>
<div>
Introduce el usuario:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
</body>
</html>
Espero vuestra respuesta.
Muchas gracias a todos.
Saludos.