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

Question

我正在尝试创建一个搜索框，该搜索框基本上会根据用户输入的 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);
        });
    });
}

Answer 1

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

Answer 2

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

更改代码以对 id 和 value 都使用“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 datalist value vs. inner-text

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