通过迭代JSON文件填充datalist选项

Question

我试图创建一个搜索框，它基本上可以根据用户从json文件中的键值对输入自动完成。看起来使用datalist可能是最好的选择，但是当我执行下面的代码时，HTML中不会出现任何选项标记。

我对jquery和json还是相当陌生的，所以我对建议持开放态度。

{ "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"
}
]}

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

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);
        });
    });
}

Answer 1

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