Jquery – AutoCompletar

agosto 10, 2010 Publicado en Admin-tips, JavaScript con 30 Comentarios

En días pasados tuve la necesidad de crear una interfaz web para redacción, donde a partir de un textbox y lo que ellos iban escribiendo, se hacia una consulta a la Base de Datos y les desplegaba unos terminos que contenian el texto hasta ese momento ingresado, para esto utilice jquery y jquery-ui (User Interface), realmente fue muy sencillo y a continuación les muestro los pasos necesarios.

Lo primero que debemos hacer es descargar las librerias de jquery-ui que nos permitirán usar la funcionalidad de autocompletar:

• Ir a http://jqueryui.com/download
• En la parte superior derecha hacer click en “Deselect all components” , lo cual dejara el listado limpio
• En la sección de “Widgets” seleccionar “Autocomplete”, al hacer esto se seleccionarán las librerias necesarias para que el autocomplete funcione sin problemas
• En la Barra de la Derecha seleccionar la versión 1.8.4 de jquery-ui, y hacer clic en Download
• Desempaquetar el archivo en una carpeta llamada jquery

Aqui ya tenemos las librerias necesarias para hacer nuestro autocompletar por medio de javascript.

Ahora creamos una página html cualquiera y la modificamos para incluir las librerias js y css antes descargadas, puede ser en el head o en el body del documento html:

<script src="../jquery/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../jquery/js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>

Vamos a crear un textbox con id “palabra” que será el que utilizaremos para hacer el llamado al autocompletar, y dos campos de tipo oculto donde vamos a almacenar el id y el valor de la palabra que seleccionemos:

<input id="palabra" size="30" value='' >
<input type='hidden' id='palabraId' value='' >
<input type='hidden' id='palabraTexto' value='' >

Creamos la función que se va a encargar de hacer el llamado al script que trae las posibles opciones a partir del texto ingresado en el textbox:

<script type="text/javascript">
   $(function() {
   //Se encarga de ejecutar la función autocomplete de jqueryui
      $("#palabra").autocomplete({
         source: function(request, response) {
             //Llamado al script Search.php que devuelve arreglo JSON
             $.getJSON("/Search.php", {
                term: request.term
             }, response);
         },
         minLength: 2, //Numero de caracteres minimos
         //Cuando el usuario selecciona una opción asigna los valores a los campos ocultos
         select: function(event, ui) {
             $("#palabraId").val(ui.item.id);
             $("#palabraTexto").val(ui.item.value);
         },
      })
      //Función que se encarga de desplegar las opciones
      .data( "autocomplete" )._renderItem = function( ul, item ) {
          return $( "<li></li>" )
             .data( "item.autocomplete", item )
             .append( "<a>" + item.value + "</a>" )
             .appendTo( ul );
      };
   });
</script>

<style>
     //Asignamos un gif para mostrarle al cliente que se estan buscando opciones
    .ui-autocomplete-loading { background: url(../jquery/css/images/indicator.gif) no-repeat right; }
    #palabra{ width: 15em; }
</style>

El script Search.php debe devolver un arreglo de tipo JSON con las columnas “id” y “value” para que sean desplegadas como opciones en el textbox, aca les dejo un ejemplo de respuesta:

[{"id":711,"value":"Columnistas","total":0},{"id":600,"value":"Econom\u00eda","total":0},{"id":510,"value":"F\u00fatbol   Colombiano","total":0},{"id":100,"value":"Colombia","total":14},{"id":810,"value":"Telecomunicaciones","total":0},{"id":814,"value":"Consejos","total":0},{"id":1113,"value":"Ecolog\u00eda","total":0},{"id":1548,"value":"contenido","total":1},{"id":1562,"value":"Atl\u00e1ntico","total":4},{"id":1572,"value":"Puerto  Colombia","total":1},{"id":1576,"value":"Centro de  Convenciones","total":3}]

Esta es una imagen de como se veria el textbox en el momento en que se escriben dos caracteres:

despues en el momento de navegar con las flechas por las posibles opciones:

En siguientes entradas les mostrare como acceder con jquery a las estructuras html, adicionar, modificar y eliminar entidades HTML.

Tags: ajax, autocompletar, autocomplete, javascript, jquery, jqueryui, tags, textbox