Wie verzögern Sie die Java-Skript keyup() Handler, wenn Benutzer Textfeld löschen

Question

Ich benutze JavaScript keyup() Ereignis für ein einzelnes Textfeld.

Wenn jemand Typen „Windows“, es wird eine HTTP-Anforderung für jeden keyup senden:

„W“, „Wi“, „Win“, „Wind“, „Windo“, „Window“ , "Windows"

Dies ist das gewünschte Verhalten.

Wenn der Benutzer das Textfeld leer löscht, gibt es einen Fehler.

Dies ist das unerwünschte Verhalten.

Frage

Wie kann ich eine HTTP-Anforderung stoppen gesendet wird, wenn das Textfeld gelöscht wird?

Answer 1

Überprüfen Sie die value vor antrag

function getResult(elem) { 
 

 
    if (elem.value !== '') { 
 

 
    console.log('Have values') 
 
    } else { 
 

 
    console.log('No values') 
 
    } 
 

 

 
}

<input type="text" onkeyup="getResult(this)">

Answer 2

können Sie AJAX verwenden, um Informationen an den Server zu senden (und Informationen für diese Angelegenheit erhalten):

<?php 

if (isset($_POST['search'])) { 
    echo json_encode($_POST); 
    die(); 
} 

?> 

<form> 
    <input id="search" type="text" name="search" /> 
</form> 

<script> 

document.getElementById("search").addEventListener('keyup', function (e) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", "#", true); 
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState === XMLHttpRequest.DONE) { 
     if (xhr.readyState == 4 && xhr.status == 200) { 
     object = JSON.parse(xhr.responseText); 
     console.log(object); 
     } 
    } 
    } 
    xhr.send("search=" + this.value); 
}); 

</script>