Autocompletar de Jquery con PHP y MySql

By peter, 12 Septiembre, 2011

Para usar un campo de texto que se autocompleté necesitas usar la librería JQUERY y JQUERY UI.

Por ejemplo tengo un campo de texto que quiero que se autocomplete con los nombres de los municipios de México; que en el campo se despliegue una lista de sugerencias con respecto a lo que tú vas tecleando. Aquí un ejemplo práctico.

Añadir la referencia a las librerias de jquery y jquery ui antes del </head>; esto en tu formulario o código html.

En el código HTML:


<link href="jquery/css/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /> 
<script src="jquery/js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="jquery/js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>

Ahora entre el </head> y el <body> coloque el siguiente script:

 


 jQuery(document).ready(function(){
   $("#municipio").autocomplete({
      source:"municipios.php", 
      minLength:'4'
   });
 });

En el formulario en mi input de tipo text
 

   
 <label for="municipio">Municipio</label><br />
<input autocomplete="on" id="municipio" minlength="4" name="municipio" size="35" type="text" />

minlength para que apartir de 4 caracteres me empiece a buscar o sugerir.

Después creó un mi archivo php donde voy a consultar a la base de datos.

municipios.php


    require_once("escolar_fns.php"); //CLASEPARA CONECTAR A LA BD 
    if ( !isset ($_REQUEST['term'] ) ) exit; //SI NO CONTIENE NADA 'term' detiene el script 
    
    $sql = "Select id_municipio AS 'id', nombre_municipio AS 'Municipio' 
                 From municipios Where nombre_municipio like '%$term%' Or id_municipio like '%$term%' Limit 10" ; 
    $result = $conex->listaObjetos($sql); //CONSULTA A LA BASE DE DATOS 
    if ( count($result) > 0 ) exit; 
    
    $data = array(); 
    foreach ($result as $r) { //ALMACENA LOS DATOS EN UN ARRAY 
        $data[] = array( 
            'label' => utf8_encode($r->Municipio), 
            'value' =>utf8_encode( $r->;Municipio )
       ); 
   } // TRASFORMA EL ARREGLO EN FORMATO JSON 
   
   echo json_encode($data); 
   flush();

Aquí dejo un video que muestra su funcionamiento:

Comentarios3

Jall (no verificado)

Hace 13 años 10 meses

que tal, solo para pedirte que si puedes poner los archivos para descarga, seria muy util, y te lo agradeceria mucho