Con la clase en los talones

Una de las funcionalidades que más me gusta de las webs hoy en día es la del Live Search.

A grandes

rasgos, consiste en que, mediante JavaScript, mientras el usuario introduce lo que desea buscar en la página, ella solita, tras cada tecleo, se encarga de hacer una consulta a la base de datos (o fichero XML) y mostrar una pequeña "ayuda" al usuario con (a ser posible) enlaces directos hacia lo que cree que éste desea encontrar.

Vamos, que esto, a nivel de usuario final, es una gozada.

Las posibilidades de combinar JavaScript con PHP + XML son infinitas, yo solo pondré los fragmentos de código como ejemplos de cómo se implementaría esta sencilla funcionalidad accediendo a mi base de datos de artículos (mediante la clase BlogData, que implementa los métodos correspondientes a los artículos, usuarios y categorías, pero eso ya es otra historia).

El código está en inglés porque esta aplicación la desarrollé en Dublín, y para mostrársela a mi tutor de prácticas, lógicamente, no se la iva a escribir en castellano :P. De todas formas, si habeis tenido que consultar tutoriales serios y en condiciones, estareis acostumbrados a leer código en inglés.

Por último, detallar que este código está basado en esos tutoriales (mayormente el de JavaScript), asique es posible que en algunas ocasiones veais alguna línea que sobre o algún error en la metodología.

El tutorial del que he sacado la mayor parte de la información es el siguiente:

http://www.w3schools.com/php/php_ajax_livesearch.asp

Es muy bueno y se lo debo todo a él, gracias W3 Schools :D.

Este sería el fragmento de HTML para el textbox:


<html>
<head>
    <style type="text/css">
        #live_search
        {
            position: absolute;
            background-color:#FFF;
            margin-left:8px;
            width:120px;
        }
    
        #live_search p
        {
            margin-left:8px;
            padding-top: 2px;
            color: #ba0303;
        }
    </style>
</head>
<body>

    <form>
        <input type="text" name="search_title" onkeyup="showResult(this.value)" autocomplete="off" >
        <br />
        <div id="live_search"></div>
    </form>

</body>
</html>

- El DIV live_search se encargará de mostrarnos las coincidencias, es decir, será nuestro cuadro con los resultados de la búsqueda en tiempo real.

- Ponemos la propiedad autocomplete="off" para que el navegador se olvide de ayudarnos en la búsqueda, ya que seremos nosotros los que ayudemos al usuario a nuestra manera.

- Como veis, he incluido el fragmento de CSS. Podeis modificar el aspecto a vuestro gusto, éste está preparado para el diseño de mi aplicación. La propiedad position la he puesto en absolute para que el recuadro con los resultados aparezca por encima del resto de componentes de la página, como cualquier autocompletado de un explorador corriente.

Este sería el fragmento de JavaScript:


<script type="text/javascript">

var xmlhttp;

function showResult( str ){

if ( str.length == 0 ){
//si no hay nada introducido en el textbox, quitamos el borde y los resultados mostrados
document.getElementById("live_search").innerHTML="";
document.getElementById("live_search").style.border="0px";
return;
}

xmlhttp = GetXmlHttpObject();

if ( xmlhttp == null ){
alert ("Your browser does not support XML HTTP Request");
return;
}

//la página en la que se encuentra nuestro código PHP que accede a la base de datos:
var url = "live_search.php";
/*
*el parámetro GET que enviaremos a la página PHP, que tomará la cadena
*de caracteres que lleva escritos el usuario:
*/
url = url + "?title=" + str;

xmlhttp.onreadystatechange = stateChanged ;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}

function stateChanged(){

if ( xmlhttp.readyState == 4 ){
//la propiedad innerHTMl sirve para insertar código html "a capón" en un elemento
document.getElementById("live_search").innerHTML = xmlhttp.responseText;
//cambiamos el estilo del DIV que contendrá los resultados, poniéndole un borde
document.getElementById("live_search").style.border = "1px solid #ba0303";
}
}

function GetXmlHttpObject(){

if ( window.XMLHttpRequest ){
// código para IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}

if ( window.ActiveXObject ){
// código para IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}

</script>

Y, finalmente, el archivo PHP, que se llamará live_search.php:


<?php

require_once ( 'includes.php' );

//comenzamos a trabajar con el objeto de tipo BlogData:
//(podéis rellenar un array con nombres y luego recorrerlo para probar el ejemplo)

$blogData = BlogData::start($config);

//cogemos el parámetro GET que introdujo el usuario (el que venía por JavaScript):

$title_searched = $_GET['title'];

/*aquí compruebo que la longitud de lo que se va buscando sea de más de un carácter
imaginaos que tenemos dos mil nombres en nuestra base de datos y el usuario pone una "a",
saldrían todos los nombres y enlaces que coincidiesen con esa letra, una locura*/

if ( strlen($title_searched) > 1 ){

$article = new Article();

$article->setTitle($title_searched);

/*enviamos un objeto Artículo con el título nada más para buscar entre los artículos
publicados que coinciden con esa cadena y guardamos el array de encontrados en
la variable $found*/

$found = published_articles( $article , $blogData );

$hint = "";

if ( count( $found ) > 0 ){

/*Si se ha encontrado alguna coincidencia con esa cadena, recorremos cada artículo guardado en
el array de artículos encontrados*/

foreach ( $found as $article_found ) {

 /*La variable $hint guarda las "pistas" que le daremos al usuario.
 Si os fijais en el fragmento de JavaScript, es una cadena de código html la que introducimos
 en el elemento DIV, ESTA es la creación de esa cadena*/

 if ( $hint == "" )
 $hint = "<p><a href=\"index.php?article_id=".$article_found->getId()."\" >".$article_found->getTitle()."</a></p>";
 else
 $hint .= "<p><a href=\"index.php?article_id=".$article_found->getId()."\" >".$article_found->getTitle()."</a></p>";
}
}

//Si hemos encontrado "pistas", se las enviamos al DIV

if ($hint != "")
 echo $hint;
}
?>

Espero que os haya servido de guía, si veis algún fallo, teneis alguna sugerencia o algo por el estilo, no dudeis en comentarlo! :D

1 saludo!

Con la clase en los talones

Título de la noticia

Función Live Search

nuevo = new Blog()

Archivo del Blog

Etiquetas