CODEWITHSUNDEEP
androidhtmlwebviewcordova
Motasem M. Al-wazir
Motasem M. Al-wazir

Reputation: 107

HTML5 datalist tag is not working in android

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

Answers (3)

Shantanu
Shantanu

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

Tux
Tux

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

Umesh Panchani
Umesh Panchani

Reputation: 440

http://caniuse.com/datalist check here, android browser not supports. so you have use jquerymobile or other framework.

Upvotes: 0

Related Questions