title: How to clear datalist input when options are opened?
body: <p>I have a html5 input with associated datalist, I want to clear the input when the options are opened so that all of them could be visible (unfiltered). How could I do this in Javascript? (with jQuery or not)</p>
  
  <p>For example (<a href="https://stackoverflow.com/a/29755076/2190425">https://stackoverflow.com/a/29755076/2190425</a>)</p>
  
  <pre><code>&lt;input type="text" name="city" list="cityname"&gt;
  &lt;datalist id="cityname"&gt;
    &lt;option value="Boston"&gt;
    &lt;option value="Cambridge"&gt;
  &lt;/datalist&gt;
  </code></pre>
  
  <p>When I click the dropdown arrow, then select Boston and after that click the dropdown arrow again - after this second click I want the input to be empty (because it filters the options to the one option that's typed in - Boston), so I need some kind of event or something that would allow me to empty the input, but it can't be <code>input</code> event, because nothing is input when you click the dropdown yet.</p>