Question

我正在创建一个Google脚本网络应用，并且我试图获取适用于Mac（主要是IOS设备）的safari上的数据列表。下面的代码确实适用于较小的数据列表，但是我希望显示超过30000个数据列表条目。数据列表的目的是在输入库存清单ID号时显示匹配的条目。例如，键入“ B”将产生蓝色和黑色，或者键入“ ue”将显示蓝色。该代码适用于一小部分列表，但当我输入全部30000个清单项目时，它在ios设备上崩溃，并永久需要在Mac Safari上加载。我相信这是由于代码必须将每个项目“转换”为其他内容。我的思考过程是，如果我知道将项目转换成什么，就可以从一开始就设置数据列表对象。当我在android或Windows计算机上使用此应用程序时，30000个库存物料会立即显示。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Color Datalist</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<input type="text" name="color" id="color" value="" list="colorlist" />
<datalist id="colorlist">
    <select style="display: none;">
        <option value="Black" />
        <option value="Blue" />
        <option value="Dark Green" />
        <option value="Grey" />
        <option value="Green" />
        <option value="Red" />
        <option value="White" />
        <option value="Yellow" />
    </select>
</datalist>
<script>
$window.load(function () {
    var nativedatalist = !!('list' in document.createElement('input')) && 
        !!(document.createElement('datalist') && window.HTMLDataListElement);

    if (!nativedatalist) {
        $('input[list]').each(function () {
            var availableTags = $('#' + $(this).attr("list")).find('option').map(function () {
                return this.value;
            }).get();
            $(this).autocomplete({ source: availableTags });
        });
    }
});
</script>
</body>
</html>

Answer 1

我没有使用polyfill，而是使用了awesomeplete。 awesomeplete在野生动物园，谷歌浏览器和Edge上表现出色！要实现它，请将js文件扔到您的页面上，然后使用标签。他们的网站提供了大量文档和自定义选项。 http://leaverou.github.io/awesomplete/#basic-usage

Safari JS pollyfill的数据列表

1 个答案: