Autocompletar de Jquery con PHP y MySql

Enviado por peter el Lun, 12/09/2011 - 22:04

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.

[html4] [/html4]

Ahora entre el </head> y el <body> coloque el siguiente script
[jquery] [/jquery] En el formulario en mi input de tipo text

[html4]
[/html4]
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.

Añadir nuevo comentario

Filtered HTML

  • Falta el filtro. Se eliminará todo el texto
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.
  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd><php>
  • Saltos automáticos de líneas y de párrafos.