Custom autocomplete with html5 datalist
I am working with html datalist to fill in some data automatically. I need a behavior where it should filter everything but one default. Below is a sample code:
<input type="text" list="mylist"/>
<datalist id="mylist">
<option value="San Jose"></option>
<option value="San Francisco"></option>
<option value="New York"></option>
<option value="Chicago"></option>
<option value="Boston"></option>
<option value="Los Angeles"></option>
</datalist>
In the previous case, by default, if I find s, it will show only San Jose and San Francisco, and when I type n, it will show only New York.
My requirement is that whatever is typed should always show San Jose (default) and then filter the rest of the items.
Example: Input B, should show San Jose and Boston because San Jose is my default and Boston is the filtered value in the input field.
Is it possible? if not, what are the alternative ways to achieve the same result?
I am using Javascript / JQuery if needed. However, I cannot use any autocomplete plugin.
source to share
This is not possible without using a custom plugin. Support datalist
is still mediocre at best, and there is currently no way to influence which options are shown.
There are some differences in browser settings that cannot even be influenced (Chrome only matches when the option is run, FireFox also matches text elsewhere inside them). There is no way to change this, let alone add custom ways to display certain offers.
source to share