18.3. Añadiendo los comportamientos

Crear un buscador en tiempo real significa que cada vez que el usuario escribe un carácter en el cuadro de búsqueda debemos realizar una llamada al servidor. Posteriormente, el servidor devuelve la información necesaria para poder actualizar las zonas de la página donde se muestran los resultados sin tener que recargar completamente la página.

Aunque tradicionalmente los comportamientos de JavaScript se han incluido mediante los atributos on*() de HTML, el principio básico de funcionamiento de jQuery consiste en añadir los comportamientos de cada elemento después de que la página se ha cargado por completo. De esta forma, si deshabilitas JavaScript en el navegador, no se añade ningún comportamiento y el formulario sigue funcionando como un formulario normal.

En primer lugar, creamos una función para responder al evento que se produce cada vez que el usuario pulsa una tecla en el cuadro de búsqueda:

$('#search_keywords').keyup(function(key)
{
  if (this.value.length >= 3 || this.value == '')
  {
    // do something
  }
});

Cada vez que el usuario pulsa una tecla, jQuery ejecuta la función anónima definida en el código anterior. En nuestro caso, sólo realizamos una consulta al servidor si el usuario ha escrito más de tres caracteres o si el usuario ha borrado completamente el contenido del cuadro de búsqueda.

Realizar la llamada al servidor mediante AJAX es tan sencillo como utilizar el método load() sobre el elemento DOM que queremos actualizar:

$('#search_keywords').keyup(function(key)
{
  if (this.value.length >= 3 || this.value == '')
  {
    $('#jobs').load(
      $(this).parents('form').attr('action'), { query: this.value + '*' }
    );
  }
});

La parte de servidor que se encarga de responder a la petición AJAX es la misma acción que se ejecuta cuando se realizan peticiones normales. En la siguiente sección mostraremos los cambios necesarios en esa acción.

Por último, si JavaScript se encuentra activado, ocultamos el botón del formulario de búsqueda:

$('.search input[type="submit"]').hide();