title: jQuery event for HTML5 datalist when item is selected or typed input match with item in the list
body: <p>I have datalist like below -</p>
  
  <pre><code>&lt;input id="name" list="allNames" /&gt;
  &lt;datalist id="allNames"&gt;
      &lt;option value="Adnan1"/&gt;  
      &lt;option value="Faizan2"/&gt;   
  &lt;/datalist&gt;
  </code></pre>
  
  <p>What I want is, when an item is typed in completely(for example say in input box when user completely type "Adnan1") or selected from list, then I want an event. I tried couple of approaches but both doesn't help me so far. Approaches are -</p>
  
  <pre><code>$("#name").change(function(){
  console.log("change");
  }
  </code></pre>
  
  <p>problem with this is, the event only gets triggered when input gets out of focus I.e. when I click somewhere in the screen. </p>
  
  <p>I also tried </p>
  
  <pre><code>$("#name").bind('change', function () {
      console.log('changed'); 
  });
  </code></pre>
  
  <p>but the callback gets triggered each time when I type in. I actually need to make an AJAX call when item is completely selected. Either via type-in or by selecting from dropdown. </p>
  
  <p>First approach is bad for user perspective because he has to make extra click and second has disadvantage as for every letter an event will be triggered.</p>
  
  <p>All I want is an event when either user made a selection or typed complete sentence. is there a way to achieve this? any event that I missing and that can solve my problem.</p>