Tema: Auto suggest
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/11/2010, 01:57
Avatar de aalleexx81
aalleexx81
 
Fecha de Ingreso: noviembre-2009
Mensajes: 153
Antigüedad: 11 años
Puntos: 0
Pregunta Auto suggest

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">
                    &nbsp;
                </div>
            </div>
        </form>
    </div>

</body>
</html> 
Espero vuestra respuesta.
Muchas gracias a todos.
Saludos.