Ajax suchen, wenn Benutzer mit der Eingabe

Question

Ich möchte die Ajax ausgeführt werden, wenn Benutzer die Eingabe beendet, aber dies funktioniert nicht auf Key-up-Ereignis und wenn ich onkeyup = doneTyping() in Eingabe mit ID Suchtext bricht der Browser

<script>  
var typingTimer;    //timer identifier 
var doneTypingInterval = 5000; //time in ms, 5 second for example 
var $input = $('#search_text'); 
var txt = $(this).val(); 
$input.on('keyup', function() { 
    clearTimeout(typingTimer); 
    typingTimer = setTimeout(doneTyping, doneTypingInterval); 
}); 

$input.on('keydown', function() { 
    clearTimeout(typingTimer); 
}); 

function doneTyping() { 
    $.ajax({ 
        url:"fetch.php", 
        method:"post", 
        data:{search:txt}, 
        dataType:"text", 

        success:function(data) 
        { 
          $('#searchresults').html(data); 
        } 
       }); 

    //do something 
} 
</script> 

Danke

Answer 1

ich Ihren Code in einen Code-Schnipsel und fügte etwas Konsolenprotokollierung zu zeigen, gedreht, was los ist.

Dies zeigt, dass die Ereignisse genau so funktionieren, wie Sie es beschrieben haben ... und "Fertig eingegeben" wird 5 Sekunden nach dem Tippen in der Konsole angezeigt.

var typingTimer; //timer identifier 
 

 
var doneTypingInterval = 5000; //time in ms, 5 second for example 
 
var $input = $('#search_text'); 
 

 
console.log("$input = ", $input.length); 
 

 
$input.on('keyup', function() { 
 
    console.log("Key up"); 
 
    clearTimeout(typingTimer); 
 
    typingTimer = setTimeout(doneTyping, doneTypingInterval); 
 
}); 
 

 
$input.on('keydown', function() { 
 
    console.log("Key down"); 
 
    clearTimeout(typingTimer); 
 
}); 
 

 
function doneTyping() { 
 
    console.log("Done typing"); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
Test input: <input id="search_text">