title: Customize html datalist dropdown
body: <p>I want to customize the way datalist drop down shows. I have the following datalist right now</p>
  
  <pre><code>&lt;input type="text" id="employee" list="employee"&gt;
  &lt;datalist id="employee"&gt;
      &lt;option value="John Doe"&gt;John Doe (ID: 1)&lt;/option&gt;
      &lt;option value="Jane Doe"&gt;Jane Doe (ID: 2)&lt;/option&gt;
      &lt;option value="John Jane"&gt;John Jane (ID: 3)&lt;/option&gt;
  &lt;/datalist&gt;
  </code></pre>
  
  <p>When I type on the input box, I see the output like this
  <img src="https://i.stack.imgur.com/8z58b.png" alt="enter image description here"></p>
  
  <p>But my requirement is to make it look like below and </p>
  
  <p><img src="https://i.stack.imgur.com/rCsPH.png" alt="enter image description here"></p>
  
  <p>When the drop down is selected, only the name should be selected (without the id). Something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/VD13U.png" alt="enter image description here"></p>
  
  <p>How can I do this?  Basically I want to show more details in the dropdown but select only the Name and not the Id for submitting the form. Also, I dont want 2 columns (darker and lighter) in the dropdown. I just want the value with more information.</p>
  
  <p>Here is the <a href="https://jsfiddle.net/nfyop7sw/1/" rel="nofollow noreferrer">JSFiddle</a> which I used for this question.</p>
  
  <p>P.S. - I am generating this datalist dynamically from Ajax Call based on the user input in text field. Also, I cannot use jquery to manipulate anything. It has to be native javascript.</p>