Usuarios: Buscar registros en tiempo real en la tabla Usuarios

Buscador Ajax en tiempo real con PHP MYSQL y JQUERY

Publicado en Lector de Códigos QR 2018-03-28 16:28:00

Usuarios: Buscar registros en tiempo real en la tabla Usuarios

Buscador en tiempo real con AJAX

HTML Jquery Php QR

Resumen: Implementación de la acción buscar para mostrar resultados en tiempo real con AJAX, usamos like de Mysql para extraer los campos necesarios de la BD

Implementación de un buscador sencillo en tiempo real, que permita mostrar datos de una tabla en este caso de la tabla usuarios de la base de datos qr-apptiva.

Para ello agregamos el siguiente código html a la sección listar, modificamos algunas sección necesarias como agregar un identificador al input  id="txtbusca" y un identificador al tbody id="resultado" de la tabla. Debe quedar de la siguiente manera:

	case 'listar':
                		?>
                		<div class="col-sm-2">
		                	<a href="?page=nuevo" class="btn btn-danger btn-sm">Nuevo usuario</a>
		                </div> 
		                <div class="col-sm-4">
		                	<form method="post" action="">
		                        <div class="input-group">
		                          <span class="input-group-btn">
		                            <button class="btn btn-danger btn-sm" type="submit" name="btnenviar">Buscar</button>
		                          </span>
		                          <input type="text" class="form-control input-sm" name="txtbusca" id="txtbusca">
		                        </div>
		                    </form>                
		                </div><hr>
		                <?php 
		                $u	=	$user->search("usuario","1 ORDER BY created_at");
						$x=1;
						if($u->rowCount()>0):
						?>
							<table class="table">
								<thead>
								<th>Nº</th><th>NRO CARTILLA</th><th>NOMBRE</th><th>BONOS</th><th>ACCIÓN</th>
								</thead>
								<tbody id="resultado">
							<?php 
								while($r=$u->fetchObject()): 
									$total=$user->contar("bono","idusuario=".$r->id);
							?>
							<tr>
								<td><?php echo $x++ ?></td>
								<td><?php echo $r->nrocartilla ?></td>
								<td><?php echo $r->nombre ?></td>
								<td>
									<a href="?page=bono&id=<?php  echo $r->id ?>" class="btn btn-danger btn-xs">
										<?php echo $total ?>											
									</a>
								</td>
								<td>
									<div class="btn-group">
										<a href="?page=editar&id=<?php  echo $r->id ?>"  class="btn btn-danger btn-xs"> 
											Editar
										</a>
										<a href="?page=eliminar&id=<?php  echo $r->id ?>" class="btn btn-danger btn-xs"> 
											Eliminar 
										</a>
									</div>
								</td>
							</tr>                    
							<?php endwhile; ?>
								</tbody>
							</table>
						<?php
						else:
							mensaje("Aún no hay reegistros",1);
						endif;
                		break;

Y en nuestro archivo Javascript qr-apptiva.js ubicado el directorio qr-apptiva/public/qr-apptiva.js, crearemos el siguiente código cuya función es la de recuperar el valor del campo txtbusca ingresado por el teclado, enviando cada tecla pulsada un petición al archivo buscaUsuario quién procesa la solicitud buscando coincidencias en la tabla exactamente en el campo nombre, se puede modificar para que haga búsquedas simultáneas como nombre, dni, nrocartilla. Talvez lo implementamos más adelante, por ahora el código se vería así:

qr-apptiva.js

	$("#txtbusca").keyup(function(){
			var texto=$(this).val();
			$.ajax({
                url: urlsite+'app/process/buscarUsuario.php',
                type: 'POST',
                async: true,
                data: 'texto='+texto,
                success: function(e){
                    $("#resultado").html(e).show();
                },
                beforeSend: function(e){
                    $("#resultado").html("Buscando... ").show()
                },
                error: function(e){
                    $("#resultado").html("Error de conexión").show()
                }
            });
		}

Por último para nuestro archivo buscarUsuario.php quién procesa las peticiones con una consulta MYSQL usando el comando LIKE, veamos el código:

buscarUsuario.php

if(isset($_POST['texto'])):
 	require "../clases/class.mysql.php";
	//require("../../app/clases/class.mysql.php");
	$user=new Usuario();
	$texto		=	$_REQUEST['texto'];
	$u 			=	$user->search("usuario","nombre LIKE '".$texto."%' ORDER BY created_at LIMIT 20");
	if($u->rowCount()>0):
		$cadena="";
		$x=1;
		while($r=$u->fetchObject()):
			$total=$user->contar("bono","idusuario=".$r->id);
			?>
			<tr>
				<td><?php echo $x++ ?></td>
				<td><?php echo $r->nrocartilla ?></td>
				<td><?php echo $r->nombre ?></td>
				<td>
					<a href="?page=bono&id=<?php  echo $r->id ?>" class="btn btn-danger btn-xs">
					<?php echo $total ?>											
					</a>
				</td>
				<td>
					<div class="btn-group">
						<a href="?page=editar&id=<?php  echo $r->id ?>"  class="btn btn-danger btn-xs"> 
							Editar
						</a>
						<a href="?page=eliminar&id=<?php  echo $r->id ?>" class="btn btn-danger btn-xs"> 
							Eliminar 
						</a>
					</div>
				</td>
			</tr>			
            <?php
		endwhile;
	endif;
endif;

Explicando un poco:

  1. Verifica si existe un envio por POST y entra si lo hay.
  2. Se conecta a la Base de Datos qr-apptiva y crea un manejador $user
  3. Recupera el valor de texto para realizar la consulta, mediante un select y like extrae el registro o registros que coincidan con el texto con un limite de 20 resultados o registros.
  4. Por último los recorre para marcarlos con html y retornar el resultado obtenido.

 

Redacción:| Artículo leído: 323 veces | Publicación:


Compártelo con tus amigos


Publicaciones relacionadas de Lector de Códigos QR