busqueda cuelga conexión pagina

hola

tengo esta búsqueda de info de mysql por medio de ajax.

El problema es que al hacer esta búsqueda de manera exhaustiva, osea, cuando estoy buscando muchos productos y escribiendo muchos nombre, la conexión de la pagina se cuelga y aparece en el navegador google chrome que se ha perdido la conexión con la pagina.

no se porque pasa esto.

si alguien me pudiese ayudar se lo agradeceria.

Form Búsqueda:

Código HTML :

   <table border='0' width='348px'>
         <tr height="50px">
            <td colspan='2' align='center' style="font-size:14px; font-weight:bold">Busqueda Productos</td>
         </tr>
         
         <tr>
            <td width='50%' align="right">Nombre:</td>
            <td>
                   <input type="text" name="nom" id="nom" onkeyup="BuscarProducto()" />
                </td>
         </tr>
       
            
            
            
            
         
           
                
      </table>
        
         
   </form>

<div id="result" style="border:0px solid #F00; width:1000px"></div>

Ajax:

Código Javascript :

function BuscarProducto(){

   



   nom= $("#nom").val() ;

   

   str = "nom="+nom;

   

   

   

   $.ajax({

   

            

            

            type: 'POST',

   

            url: 'ListadoProductos2.php',

            

            data: str,

   

            success:function(msg){

   

               

                     

                        

                        $("#result").html(msg) 

                     

                  

                  

   

            }

   

            

   

   });

   

   

   

                  

   

}

pagina ListadoProductos2.php:

Código PHP :

<?
session_start();
include ('lib/claseBaseDatos.php');
   $conexion = new ConexionBaseDatos;
   $link = $conexion->Conectarse($conexion);
   
   
?>   

<style type="text/css">
.fila_0 { background-color: #3C80EE; color:#fff}
.fila_1 { background-color: #FFF;}




</style>

<form>
      <table border='0' width='348px'>
         <tr height="50px">
            <td colspan='2' align='center' style="font-size:14px; font-weight:bold">Busqueda Productos</td>
         </tr>
         
         <tr>
            <td width='50%' align="right">Nombre:</td>
            <td>
                   <input type="text" name="nom" id="nom" onkeyup="BuscarProducto()" />
                </td>
         </tr>
            
            <tr height="50px">
            <td colspan='2' align='center' style="font-size:12px; font-weight:bold">Rango de Precios de Ventas</td>
         </tr>
            
            <tr>
            
            <td colspan="2" align="center">
                  Precio Menor: <input type="text" name="p1" id="p1" style="width:70px"  /> Precio Mayor:<input type="text" name="p2" id="p2" style="width:70px"  />
                </td>
         </tr>
            
            
            
            
            <tr>
            
            <td colspan="2" align="center">
                   <input type="button" value="Buscar por precio" onclick="BuscarProducto2()" />
                </td>
         </tr>
         
           
                
      </table>
        <br />
        <div id="result" style="border:0px solid #F00; width:1000px">
        
        <table border='0' width="100%">
         <tr>
            <td colspan='9' align='center' style="font-size:14px; font-weight:bold">Listado de productos</td>
         </tr>

         <tr>
         
            <td style="font-weight:bold">Producto</td>
            <td style="font-weight:bold">Precio Costo</td>
            <td style="font-weight:bold">Precio Venta</td>
            <td style="font-weight:bold">Cantidad</td>
            <td style="font-weight:bold">Garant&iacute;a</td>
            <td style="font-weight:bold">Fecha Ingreso</td>
            <td style="font-weight:bold">Descripci&oacute;n</td>
                <td style="font-weight:bold"></td>
         </tr>
<?
         $query = mysql_query("select producto, precio_costo, precio_venta, cantidad, garantia, fecha_ingreso, descripcion, id from productos order by producto");
         $i=0;
         while($row = mysql_fetch_assoc($query)){
            echo "<tr class='fila_".($i%2)."'>"; 
               
               echo "<td> $row[producto] </td> "; 
               echo "<td> $row[precio_costo] </td> "; 
               echo "<td> $row[precio_venta] </td> "; 
               echo "<td> $row[cantidad] </td> "; 
               echo "<td> $row[garantia] </td> "; 
               echo "<td> $row[fecha_ingreso] </td> "; 
               echo "<td> $row[descripcion] </td> "; 
               echo "<td><img src='img/edit.png' style='cursor:pointer' title='Editar' onclick='EditarProducto(".$row['id'].")'></td>";
            echo '</tr>';
            $i++;
         }
         
   
?>         
      </table>
        
        
        </div>
         
   </form>

Sí, se entiende por qué.

Simplemente disparas una nueva conexión al servidor por cada tecla presionada. Las consecuencias de esto, las has sufrido.

En vez de disparar la conexión inmediatamente, pon el código en un temporizador con setTimeout().

La lógica sería: Se presiona una tecla, se pregunta si ya hay un temporizador andando, si lo hay, pararlo (con clearTimeout()) y reiniciarlo, si no lo hay, iniciarlo. Tarde o temprano el temporizador expirará y disparará la conexión al servidor.

En tu caso sería algo así:

Código Javascript :

var ttm = null;

function BuscarProducto(){
   if (ttm != null) {
      clearTimeout(ttm);
      ttm = null;
   }
   ttm = setTimeout(
      function () {
         nom= $("#nom").val() ;
         str = "nom="+nom;
         $.ajax({
               type: 'POST',
               url: 'ListadoProductos2.php',
               data: str,
               success:function(msg){
                        $("#result").html(msg) 
               }
         });
   }, 500);
}

500 milisegundos es el tiempo que debe transcurrir sin presionar ninguna tecla para que la consulta se dispare.

hola DriverOp

el script que me recomiendas, hace tambien que se cuelgue la conexión, aunque esta duro mas para que se cuelgue.

nota: decir colgar la conexión es: cuando estoy escribiendo el nombre del producto que deseo buscar en el text este deja de hacer el retorno por ajax de la info, y entonces es ahi cuando me doy cuenta que se bloquea ya que actualizo el navegador y me dice que se ha producido un error al carga la url.... esto en el navegador de google chrome.

Dos cosas que puedes hacer.

No envíes tanto código HTML de regreso al navegador luego de una petición Ajax. Por ejemplo no necesitas reenviar todo lo que está por arriba de la consulta SQL por cada petición (especialmente esos estilos, que deberían estar en un archivo css separado).

Tampoco necesitar reenviar el encabezado de la tabla que usas para mostrar el resultado de la búsqueda.

Lo otro que puedes hacer es no generar una consulta que devuelva tantos registros. Podrías paginar los resultados usando LIMIT de SQL.

bueno con esos consejos que me das DriverOp, igual se cuelga, pero se demora mas en colgar ( y eso en cierta forma es bueno porque se esta optimizando ) .. aunque no se como hacer con la conexión que cada vez que escribo una letra se abre una conexión y de igual manera la cierro.