sql >> Base de Datos >  >> RDS >> Mysql

2 cuadros de entrada de autocompletar/sugerencias usando jQuery o Ajax con un segundo cuadro basado en las primeras selecciones con múltiples elementos

Aquí hay un procedimiento muy simple. Solo mostraré el esqueleto principal. Agregar flash-meat estará de tu parte.

Supongamos que tenemos dos <select> en ajax.php así:

   <select id="parent">
        <option value="1">value1</option>
        <option value="2">value2</option>
        <option value="3">value3</option>
        <option value="4">value4</option>
    </select>

    <select id="child">

    </select>

Entonces, ¿qué necesitamos? Necesitamos completar el segundo <select> en caso de su selección.

Aquí viene la parte de javascript (ajax.php)

<script type="text/javascript">
            $(function(){                    
                $('#parent').change(function(){ //on change event
                var parentVal = $('#parent').val(); //<----- get the value from the parent select
                $.ajax({
                    url     : 'process.php', //the url you are sending datas to which will again send the result
                    type    : 'GET', //type of request, GET or POST
                    data    : { parentValue: parentVal}, //Data you are sending
                    success : function(data){$('#child').html(data)}, // On success, it will populate the 2nd select
                    error   : function(){alert('an error has occured')} //error message
                })
            })

            })
    </script>

Esto enviará la solicitud a process.php

Ahora viene el process.php

Aquí necesitamos los datos para completar el segundo <select>

Ahora lo que va dentro de <select> ?

<option value="someValue">someText</option>

Necesita generar algo como esto:

    <option value="11">value11</option>
    <option value="12">value12</option>
    <option value="13">value13</option>
    <option value="14">value14</option>

El valor y el texto interior se adaptan a tus necesidades.

Como vendrá de la base de datos:

  • Puede obtener el valor de selección principal en process.php con $_GET['parentValue']
  • Con ese valor, consulta la base de datos
  • Luego, a partir del resultado devuelto por la base de datos, use un bucle while , foreach o for (dependiendo de la forma en que lo esté recuperando), haga el <option value="someValue">someText</option> .
  • ¡Has terminado!

Para selección múltiple

para hacer la vida un poco más fácil, puede usar chosen multiselect

Un consejo

mysql_* es obsoleto. use PDO en su lugar. Aquí hay un enlace a un tutoría