title: How to set default value in input datalist and still have the drop down?
body: <p>I am using the <code>datalist</code> HTML property to get a drop down inout box:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input list="orderTypes" value="Book"&gt;
  &lt;datalist id="orderTypes"&gt;
    &lt;option value="Book"&gt;
    &lt;option value="Copy"&gt;
    &lt;option value="Page"&gt;
  &lt;/datalist&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that now I have to clear the input box to view all the drop down values. Is there a way to have a default value but still view all the values in the datalist when the drop down icon is clicked?</p>