[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

[cloojt]

hola man, una pregunta como cambio ese label class por input, es decir quiero que eso datos me lo muestre en un textfield

[Alexis88]

Solo tienes que cambiar al <label> por un <input> y el valor añadirlo en la propiedad value, algo así:

Código Javascript:

"<input class = email value='" + item.email + "' />"
 

Un saludo

[NueveReinas]

¡Muy buen aporte!

[Eric_Alberto]

Iniciado por Alexis88

Solo tienes que cambiar al <label> por un <input> y el valor añadirlo en la propiedad value, algo así:

Código Javascript:

"<input class = email value='" + item.email + "' />"
 

Un saludo

disculpa yo tengo este formulario tendría que poner el class así como comentas?, perdon por hacer esta pregunta a lo mejor es obvia para ustedes ya que tienen mucho conocimiento en esto pero yo apenas estoy empezando en esto y quisiera saber si es como lo estas comentando, solo poner el class y la variable dependiendo la que yo le halla puesto, espero puedas responderme y gracias por el aporte

<form id="formulario" action="insertar_registro.php" method="POST" name="form">
<h2><i><center>Pedido</center></i></h2>
<label>Seleccione el producto:</label>
<select name="names" id="names" onchange="submit();" >
<option value=""></option>
<option value="">hola</option>
</select>
<br>
<label for='id'>Clave producto:</label><br>
<input type="text" name='id' required><br/>
<br>
<label for='nombre'>Producto:</label><br>
<input type="text" name='nombre' required><br/>
<br>
<label for="marca">Marca</label><br>
<input type="text" name="marca" required><br/>
<br>

<--- solo los input de arriba de este comentario son los que se autocompletaran--->
<label for='cant'>Cantidad Solicitada:</label><br>
<input type="number" name='cantidad' min='0' max='100' required><br/>
<br>

Datos del empleado <br> <br>
<label for='nom_emp'>Nombre del Empleado:</label><br>
<input type="text" name='empleado' required><br/>
<br>
<label for='area'>Area del Solicitante:</label><br>
<input type="text" name='area_sol' required><br/>
<br>
<label for='fecha'>Fecha de la Solicitud:</label><br>
<input type="date" name='fecha_sol' required><br/>
<br>
<input type="submit" value="Enviar">
</form>

[Alexis88]

Hola, Eric_Alberto:

Si lo que buscas es rellenar datos en cajas de texto fijas, en donde tendrías que hacer la modificación es en el evento de selección:

Código Javascript:

select: function (event, object){
    $("[name=id]").val(object.item.id);
    $("[name=nombre]").val(object.item.nombre);
    $("[name=marca]").val(object.item.marca);
}
 

Para lo cual tu archivo PHP deberá devolver un objeto JSON con las propiedades id, nombre, marca y todas las que necesites.

Un saludo

[Eric_Alberto]

Iniciado por Alexis88

Hola, Eric_Alberto:

Si lo que buscas es rellenar datos en cajas de texto fijas, en donde tendrías que hacer la modificación es en el evento de selección:

Código Javascript:

select: function (event, object){
    $("[name=id]").val(object.item.id);
    $("[name=nombre]").val(object.item.nombre);
    $("[name=marca]").val(object.item.marca);
}
 

Para lo cual tu archivo PHP deberá devolver un objeto JSON con las propiedades id, nombre, marca y todas las que necesites.

Un saludo

entonces en el action de mi formulario tendria que poner el nombre del archivo de javascript cierto?

<form id="formulario" action="insertar_registro.php" method="POST" name="form">

por este o me equivoco?

<form id="formulario" action="javascript.js" method="POST" name="form">

[Alexis88]

No. Para hacer lo que creo que quieres hacer, necesitas dos archivos PHP; uno con el cual harás la búsqueda y el autocompletado, y otro hacia el cual enviarás los datos del formulario (los que obtuviste con el archivo anterior) para su procesamiento. El archivo JavaScript solo deberá contener el script para el autocompletado.

[saga32]

hola buenas tardes, se que de pronto la pregunta no corresponda a este foro, pero estoy realizando un autocomplete con jquery iu, ya me genera el autocompletado, necesito saber es como puedo enviar el id_barrio a la pagian que esta consultando es decir digita un barrio lo selecion y ahi se va aotra pagina donde iria el id_barrio me aparece esto id_barrio=undefined