Javascript - Caja de texto (input / textbox) con auto completado por JSON y AJAX

Hola a todos hoy voy a enseñar como poner en un "input" o "texbox" (caja de texto) para que cuando escriban salte una lista (tomada por una base de datos y guarde su ID).

Al igual que una tag "<select>" vamos a tener una lista asociado por un ID (oculto) y un TEXTO (visible al usuario). La ventaja de un "<input type='text' >" es que podemos escribir

el ID de cada zona esta oculto para el usuario

Sin utilizar ni recrear la rueda la mejor manera es usar :

• Jquery 
• JqueryUI

Rapidamente usamos estas librerias para Javascript desde sus servidores

Ahora creamos un "input" (tiene un id="zona_busqueda") que es donde debemos teclear una zona (que surgen de un listado en forma de Array respetando el campo "ID" y "LABEL" llamado "MiListadoArray").

Autocomplete : es una libreria en Jquery UI  que nos pide dos cosas :

• source : listado en formato de array ( id / label ) . Este puede ser un JSON tambien
• minLength : el minimo de letras para que realize la busqueda
• select : es el evento que sucede cuando seleccionamos

Yo lo subi de manera online https://jsfiddle.net/74oqc0e0
Pero ademas tengo pongo el codigo aca :

Ejemplo de Autocompletado por JQuery UI
Elija una zona : 
      



Esto va estar oculto al usuario
El ID de la zona es : 
     

Ahora sabiendo y viendo el ejemplo podemos usar JSON y AJAX para que los datos salgan de una tabla de una base de datos (mysql , sql server, etc) , el unico parametro que cambia es la opcion que dice "SOURCE" ahi le ponemos la url que DEBE devolver un listado en formato JSON y con las propiedades ( ID / LABEL ) que por defecto esta libreria de JQUERY UI las envia por el metodo GET y el parametro de lo que tecleamos se envia en la variable "term" (por GET como dijimos) .

En resumen solo ponemos la url del archivo en PHP que devuelve un JSON. Este es un ejemplo de como deberia quedar nuestro JSON.

Vamos a llamar a nuestro archivo JSON PHP el nombre "retorna_zonas_por_json.php"

[
    {"id": "1",  "label": "San Luis" }, 
    {"id": "50",  "label": "Santa Cruz"}, 
    {"id": "600", "label": "Santa Fe"}, 
    {"id": "20", "label": "Buenos Aires" }, 
    {"id": "80", "label": "Ciudad Autonoma de Buenos Aires"}
]

Y solo cambiamos la propiedad "SOURCE" con la URL del archivo PHP JSON

    $("#zona_busqueda").autocomplete({

        source: 'retorna_zonas_por_json.php',
        minLength: 2,
        select: function (event, ui) {
            $('#zona_id').val(ui.item.id);
            // evento cuando seleccionamos 
            //UI es el item de nuestro "MiListadoArray"
        }

    });