Javascript Ajax loader gif не работает

Question

Я пытаюсь создать gj-загрузчик ajax с XMLHttpRequest.

Если я набираю somthing во вводе, я вижу список с разными словами, это техника, которую вы часто видите в поисковых системах, когда вы вводите что-то в поле поиска. но я также вижу загрузчик Ajax, и он продолжает загружаться, даже если я удалю текст. Это не то, что я хочу.

Что я сделал не так?

HTML:

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

    <div id='loading' style='display: none'><img src="gifs/ajax-loader.gif" title="Loading" /></div> 

    <div id="result"></div> 

Javascript:

var input = document.getElementById("input"); 

input.addEventListener("keyup", function() { 

    var loader = document.getElementById("loading").style.display = "block"; 

    var request = new XMLHttpRequest(); 
    request.open("GET", "ajaxtest.php?data=" + input.value, true); 
    request.send(); 
    request.onreadystatechange = function() { 

     if (request.readyState === 4) { 
      //loader.src = "gifs/ajax-loader.gif"; 

      document.getElementById("result").innerHTML = request.responseText; 

     } 
     if (document.getElementById("input").value === "") { 
      document.getElementById("result").innerHTML = ""; 

     } 
    }; 
    loader.style.display = "none"; 
}); 

Answer 1

первым добавить событие для лучшего входного значения ВОССТАНОВЛЕНИЕ:

input.addEventListener("keyup change", function() { 

Вы можете использовать небольшой код JQuery:

$("#loading").hide(); 
........ 
if (request.readyState === 4) { 
//replace loader.src = "gifs/ajax-loader.gif"; with... 
       $("#loading").show(); 

       document.getElementById("result").innerHTML = request.responseText; 

      } 
      if (document.getElementById("#input").value === "") { 
       document.getElementById("result").innerHTML = ""; 
      //new code 
       $("#loading").hide(); 
      } 
     }; 
     //replace loader.style.display = "none"; with ... 
     $("#loading").hide(); 
    });