HTML5 datalist 标签在 android 中不起作用

Question

我正在使用 datalist 标签为输入文本提供自动完成功能。该标签在桌面 Chrome 上工作正常，但当我在手机（Android）上测试时它不起作用 有人可以帮忙吗？ 如果没有，你能建议一种自动完成的方法吗

Answer 1

Android 浏览器是基于 webKit 的浏览器，因此它不支持 Datalist 标签，因此它会忽略 Datalist 标签中包含的代码。大多数旧浏览器都是这种情况。

您可以使用的一个小解决方法是将

select

标签嵌入到

datalist

标签内。支持

datalist

的浏览器会忽略

select

标签，但不支持的浏览器会在输入框正下方显示一个下拉菜单。您可以如下所示处理

onchange

的

select

事件，以在用户选择输入框中填充值。

    <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：

onchange

里面的jquery代码只是一个例子，你需要根据你的实现来修改它。

查看一个小解决方案这里！ （在旧浏览器的数据列表部分），希望它对您有用。

Answer 2

http://caniuse.com/datalist检查这里， 安卓浏览器不支持。所以你必须使用 jquerymobile 或其他框架。

Answer 3

HTML5 数据列表在 Android 版 Chrome 96 中无法通过 HTTP 连接运行。适用于 HTTPS 连接。

已在本地测试。

可以在此处使用 HTTPS 检查：

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist