Contacta (+34) 622 045 404

Estudio de desarrollo front-end, maquetación web, diseño y programación WordPress freelance.

Fundado por Alberto Fortes, diseñador y maquetador web HTML5 responsive design, front-end developer JavaScript y programador WordPress freelance a medida desde 2006.

Especializados en outsourcing con importantes clientes finales.

Cómo crear un diccionario en Ajax con Jquery

16 Noviembre, 2008

Hace algún tiempo Queli y yo tuvimos que crear un plugin para Drupal de un diccionario en Ajax, la parte para Drupal se la dejo a él, yo os explico aquí cómo crear un sencillo diccionario en Ajax. Su funcioanmiento es muy simple al pulsar una letra nos muestra las palabras que empiezan por dicha letra ordenadas alfabéticamente. Si no existe ninguna palabra que empiece por la letra seleccionada nos muestra una alerta. Por defecto no aparece ningún termino. Aquí tienes una demo:

1. Creamos el html.

Simplemente creamos las capas necesarias para atacar el DOM desde Jquery, y las listas simples:

Diccionario en Ajax con jquery

Pulse sobre la letra que desee consultar para abrir el vocabulario.

A
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
B
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[etc...]

2. Y el css:
[ver código]

3. La magia está en el Javascript:

3.1. Antes de nada descárgate la última versión de Jquery.

3.2. Crea el archivo GotoVocab.js y prepáralo para que cargue automáticamente:

$(document).ready(function(){
   //el código irá aquí
});

3.3. Creamos las variables básicas y ocultamos las capas que queremos ocultas por defecto:

$(document).ready(function(){
	$("#ListVoc dt").css("text-transform", "uppercase"); // ponemos en mayúsculas los términos
	$("#ListVoc").css("display", "none"); // ocultamos el listado de términos 
        var meta= $("#leyenda_voc");
	var LVoc= $("#ListVoc dt");
	var LVocdd= $("#ListVoc dd");
	LVoc.css("display", "none"); //ocultamos los términos
	LVocdd.css("display", "none"); //ocultamos la definición de los términos
});

3.4. Creamos la id única de cada letra del vocabulario para atacar a sus respectivos términos más tarde

$("#vocab_nav li a").each(function(i){
   this.id = "GoTo_" + i;
 });

3.5. Le damos un puntero a cada término, así, si empize por la a el dt endrá la clase "letra_A", etc. para ello recorremos los dt´s de la capa ListVoc mediante el método each de jquery. capturamos la primera letra de cada dt y le añadimos como clase letra_ más dicha letra capturada:

    $('#ListVoc dt').each(function(i) {
        paragraph = this;
 	node = paragraph;
 	while (node.childNodes.length) {
	   node = node.firstChild;
	}
	text = node.nodeValue;
	first_letter = text.substr(0,1);
	$(this).addClass( "letra_" +first_letter.toLowerCase());
    });

3.6. Ahora creamos un array con todas las letras del vocablario. Lo recorremos y ocultamos el listado de términos (por si está abierto, p ej. ya hemos consultado una letra) y una vez oculto mostramso los dt y dl herederos del dt con la clase que señala el puntero.
En caso de no tener ningún término con dicha letra, ocultamos todo el listado y mostramos un mensaje de alerta diciendo que no tenemos términos que empicen por dicha letra.
letters = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "LL", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z");
for (var l=0; l<letters.length; l++) {
   $("#GoTo_"+l).click(function(l) {
   var t = $(l.target); 
   //comprobamos si tenemos resultados:
   if($(".letra_" + t.text()).text() !='') {
      meta.hide("fast"); 
      $("#ListVoc").css("display", "block"); 
      $(".letra_" + t.text()).show("fast");
      $(".letra_" + t.text()+ " +dd").show("slow");
      $("#ListVoc dt").css("display", "none");
      $("#ListVoc dd").css("display", "none");
   }
   else  {   
      $("#ListVoc").hide("fast");
      meta.html("<p class='no_result'>Lo sentimos no tenemos resultados para la letra <span>"+ t.text()+"</span>, pulse sobre otra que desee consultar para abrir el vocabulario.</p>");
      meta.show("fast");
   }
   return false;
   });
};

Y eso es todo, el js final lo puedes descargar de aquí.

DEMO.
Y si usas Drupal, Queli tiene un plugin con esto mismo. Un crack el astur este 😉