html datalist element auto suggest behavior

2019-06-15 13:34发布

I noticed that different browsers have different behavior regarding to suggesting values for a text field when you hook it up to a datalist. Some browsers show the entries which exactly starts with what you've typed(IE, older chrome versions), while others show entries which contain what you've typed as a sub-string (firefox, newer chrome versions).

For example, type i into the text box, and observe the suggestions:

browser: 
<datalist id="browsers">
    <option value="Google Chrome">Google Chrome</option>
    <option value="Internet Explorer">Internet Explorer</option>
    <option value="Firefox">Firefox</option>
    <option value="Opera">Opera</option>
    <option value="Safari">Safari</option>
    <option value="Others">Others?</option>
</datalist>
 <input type="text" name="browser" list="browsers">

(or here's a fiddle, if you prefer http://jsfiddle.net/yaj8ut3m/ )

In IE, it will suggest only Internet Explorer, but firefox & recent chrome will suggest Internet Explorer, Firefox, and Safari.

Is there some way to specify which auto suggest filtering behavior to use?

note: javascript solutions aren't acceptable

2条回答
可以哭但决不认输i
2楼-- · 2019-06-15 14:31

This is unspecified option.

And known issue:

If you type "V" the list will show only items that start with "V" in Chrome, Opera and IE, and any <option> containing "V" in Firefox.
查看更多
叼着烟拽天下
3楼-- · 2019-06-15 14:39

If the question is:

"Is there some way to specify which auto suggest filtering behavior to use?

note: javascript solutions aren't acceptable"

the answer will (sadly) be: No there isn't, this depend on browser's implementation and the datalist tag hasn't any attribute.

I have to say that is full of "plugins" and is relatively simply to write one but using js.

查看更多
登录 后发表回答