通过遍历JSON文件来填充数据列表选项

Populate datalist options by iterating through JSON file

本文关键字：填充 数据 列表 选项 文件 遍历 JSON      更新时间：2023-09-26

我正在尝试创建一个搜索框，该搜索框将根据json文件中键值对的用户输入自动完成。看起来使用datalist可能是最好的选择，但当我执行下面的代码时，html中不会出现选项标记。

我对jquery和json还很陌生，所以我对建议持开放态度。

这是json。该列表包含1450项（如果相关）：

{ "osCars": [
{   "id": 1,
    "name": "Cadillac",
    "type": "Sedan",
    "desc": "A fine American automobile"
},
{   "id": 2,
    "name": "BWM",
    "type": "Sedan",
    "desc": "A fine German automobile"
},
{   "id": 3,
    "name": "Lexus",
    "type": "Sedan",
    "desc": "A fine Japanese automobile"
}
]}

这是html:

<input type="text" maxlength="30" list="carList" id="carSearchBox" name="carSearchBox" pattern="[A-Za-z '-]*$" placeholder="search cars" autofocus autocomplete="on">
<datalist id="carList"></datalist>
<script src="js/main.js"></script>
<script>window.onload=getCars;</script>

下面是javascript/jquery:

function getCars() {
    var url, carOption;
    url = 'js/cars.json';
    $.getJSON(url, function(data) {
    //populate the cars datalist
        $(data.osCars).each(function() {
            carsOption = "<option value='"" + this.id + "'">" + this.name + "</option>";
            $('#carList').append(carsOption);
        });
    });
}

事实证明，问题不是我怀疑的javascript，而是我的JSON文件。我使用了另一个JSON文件的URL（我知道它是有效的），一切都很好。我想使用的文件太长，无法使用jsonLint进行验证，并且有一些冗长的文本值。可能有一个错误的双引号在那里，我没有看到，这是扔了它。

我认为问题在于你使用this.id作为值，而不是this.name。HTML5中的数据列表和自动完成功能似乎还没有在浏览器之间一致地实现。例如：当在数据列表中，选项的内部html（显示值）与值不同时，Chrome似乎有问题。

将代码更改为id和值都使用"this.name"效果良好（至少在Chrome中）：

function getCars() {
    $(data.osCars).each(function (idx, o) {
        carsOption = "<option value='" + this.name + "'>" + this.name + "</option>";
        $('#carList').append(carsOption);
    });
}

请参阅以下小提琴手示例：http://jsfiddle.net/6HGuU/

以及这个相关的问题：HTML5数据列表值与内部文本

如果您需要检索所选的ID而不是名称，那么您可以将其作为一个单独的步骤来查找（相关问题包含一个答案，并提出了具体的方法）。

相关文章：