[APORTE] Buscador de datos similar al de Facebook

[Alexis88]

Hola amigos del foro, en esta ocasión, quiero compartir con ustedes esta pequeña aplicación web que hice. Un buscador de datos similar al utilizado en Facebook, pero mostrando el resultado en la misma página, sin recargarla. La consulta de datos se realiza a una tabla de la base de datos.

La parte principal se basa en estos dos archivos:

Envío y recepción de datos para ser mostrados en pantalla

Código Javascript:

$("#buscar").keyup(function(e){
    var tecla = e.keyCode || e.which;
    if (tecla != 13){
        if ($("#response").css("display") != "none"){
            $("#response").slideUp();
                }
        }
}).autocomplete({
    minLength: 1,
    source: "buscar.php",
    select: function (event, object){
        $("#response img").prop("src", object.item.src);
        $("#response h1").html(object.item.value);
        $(".dato").eq(0).html(object.item.nombre);
        $(".dato").eq(1).html(object.item.apellido);
        $(".dato").eq(2).html(object.item.email);
        $("#response").slideDown();
    }
}).data("ui-autocomplete")._renderItem = function (ul, item){
    return $("<li></li>")
        .append("<a><img src = '" + item.src + "' class = mini />" + "<div><label class = nombre>" + item.value + "</label><label class = email>" + item.email + "</label></div></a>")
        .appendTo(ul);
};
 

Búsqueda en la BD y devolución del conjunto de datos encontrados

Código PHP:

include_once 'consultas.php';
$consulta = new consultas();
$consulta->cotejamiento();
$dato = $consulta->limpiar($_GET['term']);
$query = $consulta->buscar("SELECT * FROM buscar WHERE nombre LIKE '%{$dato}%' OR apellido LIKE '%{$dato}%' OR CONCAT(nombre, ' ', apellido) LIKE '%{$dato}%'") or exit('Se produjo un error');
if ($query->num_rows){
    $source = array();
    while ($row = $query->fetch_array()){
        $source[] = array('id' => $row['id'], 'value' => $row['nombre'] . ' ' . $row['apellido'], 'nombre' => $row['nombre'], 'apellido' => $row['apellido'], 'email' => $row['email'], 'src' => $row['foto']);
    }
    echo json_encode($source);
    $query->free();
}
else{
    exit ('No se encontraron datos en la consulta');
}
 

Básicamente, el usuario escribe en un <input> y con el widget Autocomplete de jQuery UI, envío el dato escrito hacia un archivo que buscará coincidencias en la tabla con dicho dato y devolverá un objeto JSON. Con el método _renderItem, le doy un formato especial a los datos recibidos, los cuales son acomodados dentro de una lista desordenada (<ul>).

Cuando el usuario seleccione un dato de la lista, sea con el puntero del mouse o con la tecla ENTER (evento select), cargo los elementos del DOM que separé especialmente para mostrarlos y con ellos, muestro al elemento que los contiene.

DEMO
DESCARGAR

Cualquier pregunta o sugerencia, háganmela llegar, esto lo hice hoy en la tarde, por lo que es probable que pueda ser mejorado.

Saludos