codeando.net

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:

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

Ahora inicializaremos el plugin para el campo deseado:

$().ready(function(){
$("#tags").autocomplete('gettags.php', { multiple: true, autoFill: true, selectFirst: true, formatItem: formatItem, formatResult: formatResult } );
});
function formatItem(row) {
return row[0] + " (" + row[1] + ")";
}
function formatResult(row) {
return row[0];
}

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:

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

Y ya sólo queda mostraros el resultado final:

Ver demostración