title: jQuery event when HTML5 Datalist option is clicked
body: <p><strong>What I have now:</strong></p>
  
  <p>So i have this HTML5 Datalist with a bunch of options in it, and I have 2 events firing. One when the user types out something that matches something the array of names that is populating the options such as "Rick Bross" or "Jack Johnson" (keyup). Another event that fires when a user starts typing the name, it pops up, the user arrows down, and hits "enter" (change).</p>
  
  <p><strong>The problem:</strong></p>
  
  <p>I need an event to fire when the user clicks one of the drop down options, BEFORE he types the full name out, and before the object is blurred. If a user clicks one right now before the name is completely typed out, the 2 events only fire the function once the input is blurred.</p>
  
  <p><strong>The Markup:</strong></p>
  
  <pre><code>&lt;datalist id="potentials"&gt;
      &lt;option value="Rick Bross"&gt;  
      &lt;option value="Jack Johnson"&gt;  
      &lt;option value="Rick Bross"&gt;  
      &lt;option value="Rick Bross"&gt;   
  &lt;/datalist&gt;
  </code></pre>
  
  <p><strong>Javascript events and functions:</strong></p>
  
  <pre><code>window.checkModelData = function(ele)
  {
      var name = $(ele).val().replace(" ", "");
      var mod = potentialModels[name];
      if(mod) {
          loadModelData(name);
      }
  }
  
  function loadModelData(name) {
      var mod = potentialModels[name];
      $("#address").val(potentialModels[name].address);
      $("#city").val(potentialModels[name].city);
      $("#state").val(potentialModels[name].state);
      $("#email").val(potentialModels[name].email);
      $("#phone").val(potentialModels[name].phone);
      $("#zip").val(potentialModels[name].zip);
  }
  
  $("#name").keyup(function(){
  
      window.checkModelData(this);
  
  });
  $("#name").change(function(){
  
      window.checkModelData(this);
  });
  </code></pre>