Custom Autocomplete with html5 datalist

Question

I am working with html datalist to auto populate some data. I want a behavior where it should filter everything except one default value. Below is the example 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 above thing, by default if I type 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 in any case whatever is typed, it should always show San Jose (by default) and then filter on rest of the elements.

Example: Typing B, should show San Jose and Boston both because San Jose is my default value and Boston is the filtered value on input box.

Is this possible ? if not, what are the alternate ways to achieve the same result ?

JSFiddle

I am okay to use Javascript/Jquery if needed. However, I cannot use any autocomplete plugin.

Answer 1

This is not possible without using a custom plugin. datalist support is still mediocre at best, and there are currently no ways to influence what options are shown.

There are some browser implementation differences that can't even be influenced (Chrome matches only on start of the option, FireFox also matches on text anywhere else inside them). There is no way of changing this, let alone adding custom ways to show certain suggestions.