title: Datalist weird behaviour
body: <p>Here are two different <code>datalist</code> one with <code>patient filenumber</code> other with state</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number"&gt;
            &lt;datalist id="patient-list"&gt;
              &lt;option value='49'&gt;pc123&lt;/option&gt;
              &lt;option value='48'&gt;pc162&lt;/option&gt;
              &lt;option value='47'&gt;pc183&lt;/option&gt;
              &lt;option value='45'&gt;pc193&lt;/option&gt;
            &lt;/datalist&gt;
  
  &lt;input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state"&gt;
            &lt;datalist id="state-list"&gt;
              &lt;option value='delhi'&gt;delhi&lt;/option&gt;
              &lt;option value='mumbai'&gt;mumbai&lt;/option&gt;
              &lt;option value='Haryana'&gt;Haryana&lt;/option&gt;
              &lt;option value='Gurgaon'&gt;Gurgaon&lt;/option&gt;
            &lt;/datalist&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When you open drop down menu for both you will notice <code>input</code> for patient show <code>value &amp; innerHTML</code> both and inverted(on clicking it enters value inside input field). And in State <code>input</code> it just simply show state</p>
  
  <p>What's the reason of these different behaviors?
  I want to input to show just <code>innerHTML</code> of <code>option</code> like state <code>input</code> and have different data in <code>value</code> &amp; <code>innerHTML</code></p>