Identifícate...

...o regístrate

codeando.net

jQuery: Tags con autocomplete
mar, 28 oct 2008 - Por Jose y archivado en Javascript y Tutoriales

En el primer artículo técnico de codeando.net vamos a explicar como hemos implementado en el motor de este blog un sistema de "tags" o "etiquetas", utilizando un "autocomplete" (en este caso un plugin para jQuery).

El primer paso es incluir los ficheros necesarios para la librería y el plugin:

  1. <link rel="stylesheet" type="text/css" href="/javascript/jquery/plugins/jquery-autocomplete/jquery.autocomplete.css" />
  2. <script type="text/javascript" src="/javascript/jquery.js"></script>
  3. <script type="text/javascript" src="/javascript/jquery/plugins/jquery-autocomplete/lib/jquery.bgiframe.min.js"></script>
  4. <script type="text/javascript" src="/javascript/jquery/plugins/jquery-autocomplete/jquery.autocomplete.pack.js"></script>

Ahora inicializaremos el plugin para el campo deseado:

  1. $().ready(function(){
  2. $("#tags").autocomplete('gettags.php', { multiple: true, autoFill: true, selectFirst: true, formatItem: formatItem, formatResult: formatResult } );
  3. });
  4. function formatItem(row) {
  5. return row[0] + " (" + row[1] + ")";
  6. }
  7. function formatResult(row) {
  8. return row[0];
  9. }

Pasemos ahora a explicar las opciones que definimos en el segundo parámetro que pasamos a la función autocomplete:

  • multiple: true
    Permite que la función sea llamada múltiples veces en un mismo campo, utilizando un separador, que por defecto es ", ".
  • autoFill: true
    Completa la palabra con texto resaltado, de manera que si pulsamos intro o tabulador se inserta el tag automáticamente.
  • selectFirst: true
    Automáticamente selecciona el primer elemento de la lista al pulsar intro o tabulador, aunque no haya ninguno seleccionado.
  • formatItem: formatItem
    Llama a la función especificada (en este caso "formatItem") en la que se puede manipular el texto visible en el desplegable del autoselect.
  • formatResult: formatResult
    Como el anterior, pero aplicable al valor de la opción.

Con esto queda hecha la parte del cliente, ahora pasemos al lado del servidor: el fichero gettags.php. Este fichero está recibiendo los caracteres tecleados por el usuario en el parámetro GET "q", que utilizaremos para realizar una consulta a la base de datos y devolver el resultado:

  1. $db = mysql_connect( 'localhost', 'user', 'password' );
  2. mysql_select_db( 'my_db', $db );
  3. $result = mysql_query( 'SELECT tag, COUNT(tag) FROM tags WHERE tag LIKE "' . $_GET['q'] . '%" GROUP BY tag ORDER BY tag', $db );
  4. while ($row = mysql_fetch_row( $result )) {
  5. echo $row[0], "|", $row[1], "\n";
  6. }

Y ya sólo queda mostraros el resultado final:

Ver demostración

Déjanos tu comentario:

Intenta comentar sobre el tema del que trata el artículo y evita descalificaciones o palabras malsonantes.
 
 

Comentarios:

  1. Escrito por Ricardo el jue, 24 jun 2010

    que variable se modifica para listar mas de 10 resultados???

  2. Escrito por Jose el lun, 28 jun 2010

    Hola Ricardo, puedes usar el parámetro "max" en el plugin... aquí tienes información más detallada:

    http://docs.jquery.com/Plugins/Autocomplete/autocomp[...]

  3. Escrito por Juan Rivera el mié, 07 jul 2010

    Excelente Jose, la verdad es que desde que comence con jquery se me han facilitado las cosas, y se me han abierto un mundo de posibilidades.

    saludos

  4. Escrito por Jose el mié, 07 jul 2010

    Me alegro que te haya gustado Juan, tienes razón, jQuery es una gran ayuda ;)

  5. Escrito por Miguel el lun, 15 nov 2010

    Hola jose, el ejemplo funciona de maravilla pero quisiera que cuando se seleciona una obcion de la lista se mostrara en otro input text diferente al que genera la consulta..

  6. Escrito por Jose el lun, 15 nov 2010

    Hola Miguel ¿Has probado a usar el evento "onchange" sobre el input que tiene el autocomplete?