Javascript 通过迭代JSON文件来填充数据列表选项

我正在尝试创建一个搜索框，它将根据用户从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>

window.onload=getCars；

下面是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);
        });
    });
}

函数getCars（）{ var-url，carOption； url='js/cars.json'； $.getJSON（url、函数（数据）{ //填充cars数据列表 $（data.osCars）.each（函数（）{ carsOption=“”+this.name+”； $（“#carList”）。附加（carsOption）； }); }); }

---

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

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

函数getCars（）{ $（data.osCars）。每个（函数（idx，o）{ carsOption=“”+this.name+”； $（“#carList”）。附加（carsOption）； }); } 请参见此fiddler示例：

以及有关的问题:

---

如果您需要检索选定的ID而不是名称，那么您可以将其作为一个单独的步骤进行查找（相关的问题包含一个答案，其中包含一个建议的方法，可以准确地执行此操作）。

结果表明，问题不在于我怀疑的javascript，而在于我的JSON文件。我使用了另一个JSON文件的URL（我知道它是有效的），一切正常。我要使用的文件太长，无法用jsonLint进行验证，并且有一些很长的文本值。那里可能有一个错误的双引号，我没有看到，那就是把它扔掉了。

我尝试将this.id改为this.name，但似乎没有任何效果（我也使用Chrome）。我看了你制作的小提琴，但它似乎不起作用，我不确定我们对我要实现的目标是否有相同的看法。我正在寻找动态创建的选项标记，以显示在datalist标记之间。你的小提琴是这样的吗？它似乎不适合我。严格来说，ID不是必需的……我只是更喜欢在搜索外部json文件时使用这些vs.字符串。

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