title: Avoid filtering of datalist items in an input element
body: <p>I need a combo-box behavior in a web application. I came across the following solution:</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 type="text" list="options" &gt;
  &lt;datalist id="options" &gt;
     &lt;option&gt;Asterix&lt;/option&gt;
     &lt;option&gt;Obelix&lt;/option&gt;
  &lt;/datalist&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, as soon as any text is entered, Firefox and Chrome only show the user those options that fit to the already entered text. In the example, as soon as the input contains the letter "A", the browser only offers Asterix as an option but hides Obelix.</p>
  
  <p>I would like to show the user all entries of the datalist, regardless of what is written inside the input element. However, I would also like to allow custom inputs. In the example, the user should be able to enter <code>Methusalix</code> and when he does, I would like to browser to still show Asterix and Obelix as alternatives. How can this be achieved with HTML5? I'd bet there is some option to allow this behavior, but I can't find it.</p>
  
  <p>I am using this to let the user chose between multiple configuration entries. The user may either chose from the existing configuration entries or create a new one by writing a name that does not exist yet. However, I would like to give the user the option to go back to the existing ones at any time, regardless of how he had named the discarded new one.</p>