Autocompletable

[aalleexx81]

Hola a todos. Estoy intentando familiarizarme con AJaX, sinceramente cosa que no me está resultando fácil, el problema que tengo es el siguiente:

Tengo un formulario, en el cual se encuentra un campo en el que quiero que se ejecute una consulta cada vez que introduzco un carácter para conseguir realizar un autocompletable.

El código del input es el siguiente:
(En éste mismo código se encuentran también las dos funciones js)

formulario.php_

Código PHP:

  <script type="text/javascript"> 
    function lookup(inputString) { 
        if(inputString.length == 0) { 
            // Hide the suggestion box. 
            $('#suggestions').hide(); 
        } else {        //alert(inputString); 
            $.post("rpc3.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); 
    } 
 
<link rel="stylesheet" type="text/css" href="index.css"> 
 
<style type="text/css"> 
    body { 
        font-family: Helvetica; 
        font-size: 11px; 
        color: #0000FF; 
    } 
     
    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 #0000FF;     
        color: #fff; 
    } 
     
    .suggestionList { 
        margin: 0px; 
        padding: 0px; 
    } 
     
    .suggestionList li { 
         
        margin: 0px 0px 3px 0px; 
        padding: 3px; 
        cursor: pointer; 
    } 
     
    .suggestionList li:hover { 
        background-color: #0000FF; 
    } 
</style> 
<link rel="stylesheet" media="screen,projection" type="text/css" href="./CSS/principal.css" /> 
</head> 
 
<div> 
    <div> 
        <br /> 
        Nombre de usuario      
        <!--<input type="text" name="id_usuario_in" size="20"/>--> 
        <input type="text" size="20" name="id_usuario"  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> 
</div> 
     
<input type=image name="id_usuario_bt" src="imagenes/2editar.gif" width="22" height="22">     
 
</script>  
  

y a continuación muestro el fichero rpc3.php, que recibirá los valores del input y los procesará con la correspondiente query:

Código PHP:

  
<?php 
     
    include("conexion.php"); 
    conectar(); 
     
    mysql_query("SET NAMES 'utf8'");  
    echo "querystring: ".$_POST['queryString']."<br>"; 
    if(isset($_POST['queryString'])){ 
        $queryString = $_POST['queryString'];         
        if(strlen($queryString) >0){ 
                $query = "SELECT nom_usuario from t_usuarios WHERE nom_usuario LIKE '$queryString%'"; 
                echo $query; 
                $result = mysql_query($query) or die("There is an error in database please contact [email protected]"); 
                    while($row = mysql_fetch_array($result)){ 
                        echo '<li onClick="fill(\''.$row['nom_usuario'].'</li>';                                          
                      } 
          } 
    } 
?>   

No termina de funcionar, creo que el problema está en que el fichero rpc3.php no recibe nada. Creo que el problema se encuentra en esta parte de la función lookup, que pienso que es la que envía los datos del input al fichero rpc3.php para su procesamiento:

Código PHP:

  else {         
            $.post("rpc3.php", {queryString: ""+inputString+""}, function(data){ 
                if(data.length >0) {         
                    $('#suggestions').show(); 
                    $('#autoSuggestionsList').html(data); 
                } 
            }); 
        }  
   

Alguien puede echarme una mano por favor.

Saludos y gracias a todos por vuestro tiempo.