Question

I have an input field on a website I am making with a jquery ajax script linked to it. Every time a key is pressed the ajax script searches for a string matching the value of the input field, if the string is found, the script updates a div on the page and sets the value of the input field back to null so that the user has a fresh space to type a new string. However, if the user types the first string and the script updates the div with the response data and clears the input field value, then the user starts typing again without waiting for a moment or two, any of the text they type into the field(for the next two seconds or so) gets deleted after they type it in. I simply want to stop their text from being deleted if they are to type a new string in shortly after the first one is validated

Here is the jquery script that updates the div, this is fired by an input( with id: searchbar)’s onkeypress event:

function search(status){
  if($("#searchbar").val().length > 1){
    $.get("http://www.website.com/subfolders/some_php_script.php",
      {l: status, q:$("#searchbar").val()},
      function(data){
        $("#div-to-update").html(data);
      }
    );
  }
}

EDIT: #searchbar is not inside the div that gets updated

Answer 1

I’ve found the answer and I’m almost certain it has to do with my Ajax possibly firing too many times {can someone confirm if this is even a real issue?}

I’ve set a boolean variable as the control for deciding whether or not the string has already been found, and if that is the case then nothing gets updated, here is the fixed code:

var found = false; //initialized

function search(status){
  if($("#searchbar").val().length > 1){
    $.get("http://www.website.com/subfolders/some_php_script.php",
      {l: status, q:$("#searchbar").val()},
      function(data){
        if(!found){
          $("#div-to-update").html(data);
          found = true;
        }
      }
    );
  }
}