<div class="status-key">Type here. I will detect when you stop typing</div>
    <input type="text" class="autocomplete">
    <div class="status-ajax"></div>
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;

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

input {
  padding:8px 20px;
  border-radius: 2px;
.status-ajax {
  margin:10px 0;
.status-ajax {

  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');
         $(that).val(''); // empty field
  // Event handlers to show information when events are being emitted
      .on('keydown', function (){  
        $statusKey.html('Waiting for more keystrokes... ');
  // 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
       _.debounce(make_ajax_request, 1300));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js