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>
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.