Edit on

  <form>
    <div class="status-key">Type here. I will detect when you stop typing</div>
    <input type="text" class="autocomplete">
    <div class="status-ajax"></div>
  </form>
body {
   background: #444444;
   color: white;
   font: 15px/1.51 system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
   margin:0 auto;
   max-width:800px;
   padding:20px;
}

form {
  display: inline-block;
  padding: 0;
  margin: 0;
  padding: 5px;
  margin: 5px 0 0 0;
}

input {
  padding:8px 20px;
  border-radius: 2px;
  border:0;
  font-size:20px;
}
.status-key,
.status-ajax {
  margin:10px 0;
}
.status-ajax {
  color:#99FF7E;
}
$(document).ready(function(){

  var $statusKey = $('.status-key');
  var $statusAjax = $('.status-ajax');
  var intervalId;
  
  // Fake ajax request. Just for demo
  function make_ajax_request(e){
      var that = this;
      $statusAjax.html('That\'s enough waiting. Making now the ajax request');
     
      intervalId = setTimeout(function(){
         $statusKey.html('Type here. I will detect when you stop typing');
         $statusAjax.html('');
         $(that).val(''); // empty field
      },2000);
    }
  
  // Event handlers to show information when events are being emitted
    $('.autocomplete')
      .on('keydown', function (){  
      
        $statusKey.html('Waiting for more keystrokes... ');
      clearInterval(intervalId);             
      })
     
  
  // Display when the ajax request will happen (after user stops typing)
    // Exagerated value of 1.2 seconds for demo purposes, but in a real example would be better from 50ms to 200ms
  $('.autocomplete').on('keydown',
       _.debounce(make_ajax_request, 1300));
  });
Rerun