HTML Datalist Tag - Match Beginning Of String Only

Viewed 478

I want to use an HTML datalist tag drop-down, but only want the options that match to correspond to the beginning of the string entered. For example:

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

If you type in "O" into the search bar, rather than just showing "Opera" as a result, it will show every result with an "o". Checking for other answers, I found this question: How to make datalist match result from beginning only, and the answer comes quite close, but won't suggest the result until it's finished ("O", "Op", "Ope", etc.) won't display "Opera"; only typing in the full word will show the result.

0 Answers
Related