How to set datalist to show all options on focus?

Question

I want to create a dropdown as in the snapshot below. I Googled and got to know that HTML5 datalist can help me do this. However, datalist does not show all options when the focus is on it. How do I show all options?

Here is my code so far:

<input list="theaters" name="theaters">
    <datalist id="theaters">
        <option value="Inox">
        <option value="E Square">
    </datalist>
</input>

Answer 1

Modify your code by removing closing tag

<input list="theaters" name="theaters">
<datalist id="theaters">
  <option value="Inox">
  <option value="E Square">
</datalist>

Check this fiddle demo. Just press down arrow key when focused in textbox. It will show all options.