Foros del Web » Programando para Internet » Jquery »

[APORTE] Buscador de datos similar al de Facebook

Estas en el tema de [APORTE] Buscador de datos similar al de Facebook en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/05/2014, 22:59
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.433
Antigüedad: 8 años, 1 mes
Puntos: 933
[APORTE] Buscador de datos similar al de Facebook

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:
Ver original
  1. $("#buscar").keyup(function(e){
  2.     var tecla = e.keyCode || e.which;
  3.     if (tecla != 13){
  4.         if ($("#response").css("display") != "none"){
  5.             $("#response").slideUp();
  6.                 }
  7.         }
  8. }).autocomplete({
  9.     minLength: 1,
  10.     source: "buscar.php",
  11.     select: function (event, object){
  12.         $("#response img").prop("src", object.item.src);
  13.         $("#response h1").html(object.item.value);
  14.         $(".dato").eq(0).html(object.item.nombre);
  15.         $(".dato").eq(1).html(object.item.apellido);
  16.         $(".dato").eq(2).html(object.item.email);
  17.         $("#response").slideDown();
  18.     }
  19. }).data("ui-autocomplete")._renderItem = function (ul, item){
  20.     return $("<li></li>")
  21.         .append("<a><img src = '" + item.src + "' class = mini />" + "<div><label class = nombre>" + item.value + "</label><label class = email>" + item.email + "</label></div></a>")
  22.         .appendTo(ul);
  23. };

Búsqueda en la BD y devolución del conjunto de datos encontrados
Código PHP:
Ver original
  1. include_once 'consultas.php';
  2. $consulta = new consultas();
  3. $consulta->cotejamiento();
  4. $dato = $consulta->limpiar($_GET['term']);
  5. $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');
  6. if ($query->num_rows){
  7.     $source = array();
  8.     while ($row = $query->fetch_array()){
  9.         $source[] = array('id' => $row['id'], 'value' => $row['nombre'] . ' ' . $row['apellido'], 'nombre' => $row['nombre'], 'apellido' => $row['apellido'], 'email' => $row['email'], 'src' => $row['foto']);
  10.     }
  11.     echo json_encode($source);
  12.     $query->free();
  13. }
  14. else{
  15.     exit ('No se encontraron datos en la consulta');
  16. }

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
__________________
«Laissez faire et laissez passer, le monde va de lui même»

Última edición por Alexis88; 12/12/2015 a las 20:57 Razón: Actualización de enlaces
  #2 (permalink)  
Antiguo 12/12/2015, 07:46
 
Fecha de Ingreso: enero-2014
Mensajes: 2
Antigüedad: 5 años, 11 meses
Puntos: 0
Respuesta: [APORTE] Buscador de datos similar al de Facebook

hola man, una pregunta como cambio ese label class por input, es decir quiero que eso datos me lo muestre en un textfield
  #3 (permalink)  
Antiguo 12/12/2015, 11:47
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.433
Antigüedad: 8 años, 1 mes
Puntos: 933
Respuesta: [APORTE] Buscador de datos similar al de Facebook

Solo tienes que cambiar al <label> por un <input> y el valor añadirlo en la propiedad value, algo así:
Código Javascript:
Ver original
  1. "<input class = email value='" + item.email + "' />"

Un saludo
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #4 (permalink)  
Antiguo 13/12/2015, 09:27
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 6 años, 3 meses
Puntos: 145
Respuesta: [APORTE] Buscador de datos similar al de Facebook

¡Muy buen aporte!
__________________
¿Te sirvió la respuesta? Deja un +1
  #5 (permalink)  
Antiguo 03/03/2016, 09:31
 
Fecha de Ingreso: febrero-2016
Mensajes: 31
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: [APORTE] Buscador de datos similar al de Facebook

Cita:
Iniciado por Alexis88 Ver Mensaje
Solo tienes que cambiar al <label> por un <input> y el valor añadirlo en la propiedad value, algo así:
Código Javascript:
Ver original
  1. "<input class = email value='" + item.email + "' />"

Un saludo

Cita:
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
Cita:
<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>
  #6 (permalink)  
Antiguo 03/03/2016, 09:57
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.433
Antigüedad: 8 años, 1 mes
Puntos: 933
Respuesta: [APORTE] Buscador de datos similar al de Facebook

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:
Ver original
  1. select: function (event, object){
  2.     $("[name=id]").val(object.item.id);
  3.     $("[name=nombre]").val(object.item.nombre);
  4.     $("[name=marca]").val(object.item.marca);
  5. }

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

Un saludo
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #7 (permalink)  
Antiguo 03/03/2016, 10:34
 
Fecha de Ingreso: febrero-2016
Mensajes: 31
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: [APORTE] Buscador de datos similar al de Facebook

Cita:
Iniciado por Alexis88 Ver Mensaje
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:
Ver original
  1. select: function (event, object){
  2.     $("[name=id]").val(object.item.id);
  3.     $("[name=nombre]").val(object.item.nombre);
  4.     $("[name=marca]").val(object.item.marca);
  5. }

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?
Cita:
<form id="formulario" action="insertar_registro.php" method="POST" name="form">
por este o me equivoco?
Cita:
<form id="formulario" action="javascript.js" method="POST" name="form">
  #8 (permalink)  
Antiguo 03/03/2016, 11:47
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.433
Antigüedad: 8 años, 1 mes
Puntos: 933
Respuesta: [APORTE] Buscador de datos similar al de Facebook

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.
__________________
«Laissez faire et laissez passer, le monde va de lui même»

Última edición por Alexis88; 02/08/2016 a las 09:07
  #9 (permalink)  
Antiguo 04/03/2016, 15:58
 
Fecha de Ingreso: marzo-2016
Mensajes: 2
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: [APORTE] Buscador de datos similar al de Facebook

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

Etiquetas: autocompletado, buscador, css, html, javascript, jqueryui, mysql, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 6 personas




La zona horaria es GMT -6. Ahora son las 07:34.