input + datalist, default value, reset on select?
<p>I'm using a <code>&lt;datalist&gt;</code> to allow selection of an option, yet still allow type-in values. Here's what I mean:</p>

<pre><code>&lt;input list="cities" name="city"&gt;
&lt;datalist id="cities"&gt;
    &lt;option value="Portland"&gt;
    &lt;option value="San Francisco"&gt;
&lt;/datalist&gt;
</code></pre>

<p>Once a city is chosen, opening the dropdown only shows that city unless I manually hit backspace to clear it. I thought I might fix that with jquery like this:</p>

<pre><code>$('input[name=city]').click(function() {
  $('input[name=city]').empty();
});
</code></pre>

<p>That's great, but it doesn't work. <a href="https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript">I've seen in other examples how to remove a 'selected' flag</a> (<a href="https://stackoverflow.com/questions/3364493/how-do-i-clear-all-options-in-a-dropdown-box">here also</a>), but I don't see that it applies to a <code>&lt;datalist&gt;</code>.</p>

<p>Here's a jsfiddle: <a href="https://jsfiddle.net/tedder/ekaLc64t/2/" rel="nofollow noreferrer">https://jsfiddle.net/tedder/ekaLc64t/2/</a></p>