Estoy haciendo una pequeña pagina y en un apartado hice un buscador, para encontrar a la lista de clientes deseados. Esto lo hice con una pagina dentro de un div que con el setInterval se actualiza cada 0.05 segundos con la lista dependiendo de lo que se haya puesto en el campo de buscar. El caso es que quiero que el setInterval pare o se pause si lo que hay en el campo de buscar no ha cambiado desde la ultima busqueda.
index.php - Es donde hay el javascript, y dentro hay un div donde se carga clients.php
Código :
<html>
<head>
<meta charset="UTF-8" />
<title>Pc Calaf Informatica SL</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-type" content="Mime-Type; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="assets/css/estructuraGestor.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">
//Javascript para poner una "pagina" dentro de un "div"
function cargarPagina(div, pagina){
$(div).load(pagina);
}
</script>
<script>
//Cada 0.05 segons se carga la pagina php que nos muestra los clientes filtrados por el texto que le pasamos desde el buscador de clientes
setInterval(function() {
$("taulaClients").load("contingut/buscador.php?palabra=" + $("#test").val());
}, 50);
</script>
</head>
<body>
<header>
<menu>
<icono>
<a href="javascript:void()" onclick="cargarPagina('#contingut','contingut/clientAlta.php')"><img src="assets/icons/clientNou.png" alt="Nou Client" title="Nou Client"/></a>
</icono>
<icono>
<a href="javascript:void()" onclick="cargarPagina('#contingut','contingut/clients.php')"><img src="assets/icons/clients.png" alt="Clients" title="Clients"/></a>
</icono>
<icono>
<a href="javascript:void()" onclick="cargarPagina('#contingut','contingut/ventaAlta.php')"><img src="assets/icons/ventaNova.png" alt="Nova Venta" title="Nova Venta"/></a>
</icono>
<icono>
<a href="javascript:void()" onclick="cargarPagina('#contingut','contingut/ventes.php')"><img src="assets/icons/ventes.png" alt="Ventes" title="Ventes"/></a>
</icono>
<icono>
<a href="javascript:void()" onclick="cargarPagina('#contingut','contingut/averiaAlta.php')"/><img src="assets/icons/averiaNova.png" alt="Nova Averia" title="Nova Averia"/></a>
</icono>
<icono>
<a href="javascript:void()" onclick="cargarPagina('#contingut','contingut/averies.php')"/><img src="assets/icons/averies.png" alt="Averies" title="Averies"/></a>
</icono>
</menu>
</header>
<div id="contenedor">
<div id="contingut"></div>
</div>
</body>
</html>
clients.php - Es la pagina que tiene el campo de buscador, y que se carga dentro del div de index.php (<taulaClients>)
Código :
<?php
session_start();
$connect = mysql_connect("localhost","pccalaf","pcGestor");
if (!$connect) {
die('No se ha podido acceder al servidor ' . mysql_error());
}
$bd = mysql_select_db("PcGestor",$connect);
if (!$bd) {
die('Base de datos no encontrada ' . mysql_error());
}
//Consulta que ens retornara tots els clients de la taula
$clients = mysql_query("SELECT * FROM clients ORDER BY cognom1 ASC");
?>
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-type" content="Mime-Type; charset=iso-8859-1" />
</head>
<body>
<!-- Buscador de clients per filtrar la llista de clients -->
<buscadorClients>
<p><input type="text" id="test" placeholder="Buscar..."></p>
</buscadorClients>
<!-- Capa on es mostrara la llista de clients filtrada segons el camp de text -->
<taulaClients></taulaClients>
</body>
</html>
buscador.php - Es la pagina que se carga cada 0.05 segundos dentro del div de clients.php (<taulaClients>)
Código :
<?php
session_start();
$connect = mysql_connect("localhost","pccalaf","pcGestor");
if (!$connect) {
die('No se ha podido acceder al servidor ' . mysql_error());
}
$bd = mysql_select_db("PcGestor",$connect);
if (!$bd) {
die('Base de datos no encontrada ' . mysql_error());
}
?>
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-type" content="Mime-Type; charset=iso-8859-1" />
</head>
<body>
<?php
//Consulta que ens retornara tots els clients de la taula
$clients = mysql_query("SELECT * FROM clients WHERE cognom1 LIKE '".$_GET['palabra']."%'");
?>
<taulaClients>
<table border="1">
<th>Nom</th><th>Telefon-1</th><th>Telefon-2</th>
<th>Mail</th><th>Direcció</th><th>Població</th><th>Data d'Alta</th><th>Observacions</th>
<?php
//Bucle per recorrer tots els clients
while($client = mysql_fetch_array($clients)) {
?>
<tr>
<td><?= $client['nom']." ".$client['cognom1']." ".$client['cognom2'] ?></td>
<td><?= $client['telefon1'] ?></td>
<td><?= $client['telefon2'] ?></td>
<td><?= $client['mail'] ?></td>
<td><?= $client['direccio'] ?></td>
<td><?= $client['poblacio'] ?></td>
<td><?= $client['dataAlta'] ?></td>
<td><?= $client['observacions'] ?></td>
<!--<td>Editar</td>
<td>Borrar</td>
<td>Nova averia</td>
<td>Nova venta</td>-->
</tr>
<?php
}
?>
</table>
</taulaClients>
</body>
</html>
Es un poco liado, pero espero que me haya explicado bien. Muchas gracias!!
