title: jQuery UI Autocomplete On change Event Not Firing Real Time
body: <p>Using jQuery UI, I am trying to fire an event as soon as the value of the <code>#tag</code> input changed but as you can see the <code>log</code> event fires if user clicks on the page and not as soon as the value of the input changes</p>
  
  <p>I already tried to bind the change event with <code>paste</code> but I am getting the same result.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $( function() {
      var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
      ];
      $( "#tags" ).autocomplete({
        source: availableTags
      });
      
       $("#tags").on('change', function(){
          console.log($(this).val());
      });
    } );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
   &lt;div class="ui-widget"&gt;
    &lt;label for="tags"&gt;Tags: &lt;/label&gt;
    &lt;input id="tags"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>can you please let me know how to fix this?</p>