Problema con busqueda dinamica con ajax

[sairam2188]

Buen Día,

Tengo un archivo donde hago consultas a una base de datos cada vez que pulso una tecla dentro de una caja de texto, esto genera un evento que llama a una función ajax y esta procesa un archivo php donde devuelvo el resultado; el problema esta si escribo muy rapido el texto, no me muestra el resultado correcto sino mas bien muestra todos los datos existentes. Cabe destacar que si escribo letra por letra de forma lenta si muestra lo correcto. Necesito saber si hay algo que deba mejorar en mi código para que al escribir una palabra me muestre los resultados correctos. Gracias de antemano.

Código donde esta la caja de texto llamada "search":

Código HTML:

<select id="_filtrar" name="_filtrar">
    <option value="Identificacion">Cedula</option>
    <option value="Tipo_Persona">Tipo Persona</option>
    <option value="Nombres">Nombres</option>
    <option value="Genero">Genero</option>
    <option value="Estado_Civil">Estado Civil</option>
    <option value="Edad">Edad</option>
    <option value="Estado_Ubicacion">Estado</option>
    <option value="Telef_Celular">Teléfono Celular</option>
    <option value="Persona_Contacto">Persona Contacto</option>
    <option value="Correo">Correo</option>
</select>
 
<input type="hidden" id="estado" name="estado" value="1">
 
<input type="text" id="search" name="search" size="60" onKeyUp="buscar()">
 

Código de la función en ajax:

Código Javascript:

function buscar(){
var xmlhttp;
 
var n=document.getElementById('search').value;
var campo=document.getElementById('_filtrar').value;
var estado=document.getElementById('estado').value;
 
if(n==''){
document.getElementById("resultados").innerHTML="";
return;
}
 
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("resultados").innerHTML=xmlhttp.responseText;
}else{
var cargando="<center><img width='20' height='20' style='vertical-align:sub' src='imagenes/loading.gif'/><span class='form'>Cargando...</span></center>"
document.getElementById("resultados").innerHTML = cargando;
}
}
xmlhttp.open("POST","filtrar_clientes.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("busqueda="+n+"&j_campo="+campo+"&estado="+estado);
}
 

Código del archivo donde hago la consulta y muestro los resultados (filtrar_clientes.php)

Código PHP:

$columna=$_POST["j_campo"];
$dato=$_POST["busqueda"];
$estado=$_POST["estado"];
 
 
$sql="SELECT * FROM vw_clientes WHERE $columna LIKE '$dato%' AND Estado=$estado ORDER BY Nombres ;
 
$result = $conexion->query($sql);
 
while ($fila = $result->fetch_row()) {
    echo $fila[1];
    echo $fila[2];
    echo $fila[3];
    echo $fila[4];
}
 

[marlanga]

Prueba a matar la llamada ajax que se hizo antes cuando pulsas otra tecla y aún no has recibido respuesta de la anterior.

[sairam2188]

Iniciado por marlanga

Prueba a matar la llamada ajax que se hizo antes cuando pulsas otra tecla y aún no has recibido respuesta de la anterior.

Ese es el problema que nose como matar la llamada ajax

[marlanga]

Almacena tu objeto xmlhttp en una variable global, busca en google cómo matar el objeto XMLHttpRequest, y modifica tu código para matar ese objeto xmlhttp antes de crear uno nuevo y asignárselo. Y no olvides ponerlo a null cuando reciba la respuesta.

[sairam2188]

Iniciado por marlanga

Almacena tu objeto xmlhttp en una variable global, busca en google cómo matar el objeto XMLHttpRequest, y modifica tu código para matar ese objeto xmlhttp antes de crear uno nuevo y asignárselo. Y no olvides ponerlo a null cuando reciba la respuesta.

Lo hice de la siguiente forma pero igual me sigue dando problemas, nose donde esta el error

Código Javascript:

function objetoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject('MSXML2.XMLHTTP.3.0');
    } catch (e) {
        try {
           xmlhttp = new ActiveXObject('MSXML2.XMLHTTP.3.0');
        } catch (E) {
            xmlhttp = false;
          }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
 
 
function buscar{
    var n=document.getElementById('search').value;
    var campo=document.getElementById('_filtrar').value;
    var estado=document.getElementById('estado').value;
    divResultado = document.getElementById('resultados');
    
      var ajax=objetoAjax();
      ajax.abort();
      ajax.open("POST", "filtrar.php",true);
      ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            if(ajax.status==200)
                divResultado.innerHTML = ajax.responseText;
        }else {
            var cargando="<center><img width='20' height='20' style='vertical-align:sub' src='imagenes/loading.gif'/><span class='form'>Cargando...</span></center>";
            document.getElementById("resultados").innerHTML = cargando;
        }
    }
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
    ajax.send("busqueda="+n+"&campo="+campo+"&estado="+estado);
}
 

[marlanga]

No has hecho nada de lo que te dije, pero quizás te hayas dado cuenta de que usar funciones ayuda a tener un código mucho más limpio.

Ahora, haz lo que te dije. Matar un objeto ajax guardado localmente en cuanto lo creas, no es lo que te dije; además es completamente inútil; un objeto ajax que no ha sido enviado, no se puede matar: ya está muerto.