Autocompletar de Jquery con PHP y MySql

peter | September 12, 2011 - 21 semanas 6 días in

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.

<link rel="stylesheet" type="text/css" href="jquery/css/smoothness/jquery-ui-1.8.2.custom.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

<script type="text/javascript"> jQuery(document).ready(function(){ $("#municipio").autocomplete({source:"municipios.php", minLength:'4'}); }); </script>

En el formulario en mi input de tipo text

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

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

<?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%'" ; $result = $conex->listaObjetos($sql); //CONSULTA A LA BASE DE DATOS if ( count($result) < 0 ) exit; $data = array(); foreach ($result as $r) { $data[] = array ( 'label' => utf8_encode($r->Municipio), 'value' =>utf8_encode( $r->Municipio )); //ALMACENA LOS DATOS EN UN ARRAY } echo json_encode($data); // TRASFORMA EL ARREGLO EN FORMATO JSON Y LO MUESTRA. flush(); ?>