Problema formulario Ajax

ivanin87 · #1 (**permalink**) 09/08/2012, 10:13

Buenas, estoy intentando hacer un formulario en el que haya varios campos que se autocompleten con valores de una BBDD y lo he conseguido parcialmente. EL problema que tengo es que al duplicar las funciones para aplicarlas por separado a ambos campos de texto siempre se me autocompleta el primero, pese a que las opciones recogidas de la BBDD son correctas... Os dejo el código a ver si alguien me puede ayudar...

Código PHP:

  <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("habilidades.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);

    }

 
    function lookup2(inputString2) {

        if(inputString2.length == 0) {

            // Hide the suggestion box.

            $('#suggestions2').hide();

        } else {

            $.post("necesidades.php", {queryString: ""+inputString2+""}, function(data){

                if(data.length >0) {

                    $('#suggestions2').show();

                    $('#autoSuggestionsList2').html(data);

                }

            });

        }

    } // lookup

    

    function fill2(thisValue2) {

        $('#inputString2').val(thisValue2);

        setTimeout("$('#suggestions2').hide();", 200);

    }

</script>

<body>

 
 
    <div>

        <form>

            <div>

                Habilidades:

                <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>

            <div>

                Necesidades:

                <input type="text" size="30" value="" id="inputString2" onkeyup="lookup2(this.value);" onblur="fill2();" />

            </div>

            

            <div class="suggestionsBox" id="suggestions2" style="display: none;">

                <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />

                <div class="suggestionList" id="autoSuggestionsList2">

                    &nbsp;

                </div>

            </div>

        </form>

    </div>

 
</body>

ivanin87 · #2 (**permalink**) 28/08/2012, 04:05

Si a alguien le sirve, aunque aún no lo he solucionado he descubierto con varios "alert" que pasa por las funciones correctas, es decir, si el campo de texto es el primero para por Lookup y Fill y si es el segundo pasa por Lookup2 y Fill2, por lo que creo que el error está en el Fill2 que no rellena el campo de texto correcto, pero no acabo de ver donde se desvía al primer campo de texto en vez de al segundo...

ivanin87 · #3 (**permalink**) 10/10/2012, 08:09

Aunque hace que no escriba por aquí, he solucionado este tema que tenía pendiente, pero me ha creado otro problema. Cuando empiezo a escribir empieza a buscar correctamente las coincidencias y mientras siga escribiendo esa palabra todo va bien, el caso es que cuando meto un caracter diferente la consulta no se modifica y por tanto la opción no desaparece. Como es un poco lio pongo un ejemplo:

Tengo un campo Habilidad y en la tabla habilidades de la BBDD (donde busca las coincidencias) solo tengo un registro que es "Deporte". Si voy escribiendo la palabra Deporte va saliendo perfectamente pero si cuando llevo escrito Dep, pongo una "a" por ejemplo, la opción no desaparece pese a que "Depa" no es parte de la palabra "Deporte". En cambio si borro todos los caracteres y dejo el text vacío sí que desaparece el cuadro de opciones.

El código es el siguiente:
SCRIPT

Código PHP:

  function lookup(inputString) {

        if(inputString.length == 0) {

            // Hide the suggestion box.

            $('#suggestions').hide();

        } else {

            $.post("habilidades.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);

    }

PARTE CORRESPONDIENTE DEL INDEX

Código PHP:

  <div style="width:600px;margin-top:2px;">

                <div style="width:150px; float:left; margin-top:5px;"><span style="color:#84A412">*</span>Habilidades:</div>

                <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" name="habilidades" style="width:200px;" />

                <input type="submit" name="insertarHabilidad" value="Insertar Habilidad" style="width:150px;" />

            </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>

HABILIDADES.PHP (Lo llama el Script)

Código PHP:

  <?php

    

    // PHP5 Implementation - uses MySQLi.

    // mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');

    $db = new mysqli('localhost', 'root' ,'', 'registro');

    function limpiarString($string) //función para limpiar strings

    {

        $string = strip_tags($string);

        $string = htmlentities($string);

        return stripslashes($string);  

    }

    

    if(!$db) {

        // Show error if we cannot connect.

        echo 'ERROR: Could not connect to the database.';

    } else {

        // Is there a posted query string?

        if(isset($_POST['queryString'])) {

            $queryString = $db->real_escape_string($_POST['queryString']);

            

            // Is the string length greater than 0?

            

            if(strlen($queryString) >0) {

                // Run the query: We use LIKE '$queryString%'

                // The percentage sign is a wild-card, in my example of countries it works like this...

                // $queryString = 'Uni';

                // Returned data = 'United States, United Kindom';

                

                // YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.

                // eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE '$queryString%' LIMIT 10

                

                $query = $db->query("SELECT DISTINCT habilidad FROM habilidades WHERE habilidad LIKE '$queryString%' LIMIT 10");

                if($query) {

                    // While there are results loop through them - fetching an Object (i like PHP5 btw!).

                    while ($result = $query ->fetch_object()) {

                        // Format the results, im using <li> for the list, you can change it.

                        // The onClick function fills the textbox with the result.

                        

                        // YOU MUST CHANGE: $result->value to $result->your_colum

                         echo '<li onClick="fill(\''.limpiarString($result->habilidad).'\');">'.limpiarString($result->habilidad).'</li>';

                     }

                } else {

                    echo 'ERROR: There was a problem with the query.';

                }

            } else {

                // Dont do anything.

            } // There is a queryString.

        } else {

            echo 'There should be no direct access to this script!';

        }

    }

?>

ivanin87 · #4 (**permalink**) 10/10/2012, 08:13

Ah, se me olvidaba, como dato a tener en cuenta, he impreso por pantalla la consulta que hace:

Código PHP:

  $query = $db->query("SELECT DISTINCT habilidad FROM habilidades WHERE habilidad LIKE '$queryString%' LIMIT 10");

Y la parte de $queryString% sólo varía si el texto va coincidiendo con la búsqueda, es decir, para el ejemplo anterior, escribo "Dep" y la consulta es:

"SELECT DISTINCT habilidad FROM habilidades WHERE habilidad LIKE 'Dep%' LIMIT 10"

Añado una "a" y se queda igual:

"SELECT DISTINCT habilidad FROM habilidades WHERE habilidad LIKE 'Dep%' LIMIT 10"

Borro la "a" e introduzco la "o", es decir, queda "Depo" y la consulta es:

"SELECT DISTINCT habilidad FROM habilidades WHERE habilidad LIKE 'Depo%' LIMIT 10"

Como veis, solo añade a la consulta la letra que meto en caso de que siga la coincidencia, en caso de que ponga "Depa" no busca LIKE "Depa%"...

Gracias a quien pueda ayudarme!