Reputation: 107
I am using the datalist tag to provide auto-complete to an input text. The tag is working fine on desktop chrome but it's not working when I test it on my phone( Android) can any one help ? If not can you suggest a way to do auto-complete
Upvotes: 4
Views: 8893
Reputation: 1221
Android browser is a webKit-based browser so it does not support Datalist tag therefore it ignores the code that is included in the Datalist tag. This is the case in most old browsers.
A small work-around you can use is to embed the select
tag inside datalist
tag. The browsers that support datalist
will ignore the select
tag, but the browsers that don't support will display a dropdown just below the input box. You can handle the onchange
event of the select
as shown below to fill the value in the input box when the user selects it.
<input type="text" id="country-input" list="countryList">
<datalist id="countryList">
<select onchange="$('#country-input').val(this.value)">
<option label="India" value="IN"></option>
<option label="United Stated" value="USA"></option>
<option label="United Kingdom" value="UK"></option>
<option label="Brazil" value="BRA"></option>
<option label="Russia" value="RUS"></option>
</select>
</datalist>
PS: The jquery code inside onchange
is just an example, you'll need to modify it based on your implementation.
See a small solution HERE! (in section Datalist for old browsers), hope it will work for you.
Upvotes: 2
Reputation: 131
HTML5 datalist does not work in Chrome 96 on Android on HTTP connections. Works on HTTPS connections.
Tested localy.
Can be checked with HTTPS here:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
Upvotes: 0
Reputation: 440
http://caniuse.com/datalist check here, android browser not supports. so you have use jquerymobile or other framework.
Upvotes: 0