title: HTML5 datalist - simulate a click event to expose all options
body: <p>I am trying to automatically show all options of a datalist html5 element to the user when a button is clicked bringing the input element into focus. Normally, all options are shown when the user clicks on the associated text input element twice. I would like to programmatically simulate this behavior so that the user can see all options before they start typing.</p>
  
  <p>I have tried simulating clicks and double clicks by getting focus using <code>$('#text-input').focus();</code> (this works) and then using jquery <code>.click()</code> (once and twice), <code>.dblclick()</code>, <code>.trigger('click')</code> and even using jquery.simulate.js. All of these trigger the <code>$('#text-input').click(function() {...});</code> but do not actually affect the state of the visible input element in the browser.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="test.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="main"&gt;
           &lt;form&gt;
               &lt;datalist id="categories"&gt;
                   &lt;option value="travel"&gt;
                   &lt;option value ="work"&gt;
                   &lt;option value="literature"&gt;
                   &lt;option value="teaching"&gt;
               &lt;/datalist&gt;
               &lt;input type="text" list="categories" id="text-input"&gt;
               &lt;button type="button" id="mic-button"&gt;
               &lt;/button&gt;
           &lt;/form&gt;
       &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my code with the dblclick attempt:</p>
  
  <pre><code>(function($) {
  
  $(document).ready(function() {
      var textInput = $('#text-input');
  
      textInput.dblclick(function() {
          alert('Handler for .dblclick() called.');
      });
  
      $('#mic-button').click(function() {
          textInput.focus();
          // list all the options by tricking the datalist
          // to think the user double clicked on it
          textInput.dblclick();
      });
  })(jQuery);
  </code></pre>