javascript 通过遍历 JSON 文件来填充数据列表选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20624983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populate datalist options by iterating through JSON file
提问by pr0t0
I'm trying to create a search box that will essentially autocomplete based on user input from a key-value pair in a json file. It looked like using datalist might be the best option for this, but when I execute the code below, no option tags appear in the html.
我正在尝试创建一个搜索框，它基本上会根据来自 json 文件中键值对的用户输入自动完成。看起来使用 datalist 可能是最好的选择，但是当我执行下面的代码时，html中没有选项标签出现。
I am still pretty new to jquery and json, so I'm WAY open to suggestions.
我对 jquery 和 json 还是很陌生，所以我很乐意接受建议。
Here's the json. The list contains 1450 items if that's relevant:
这是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"
}
]}
Here's the html:
这是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>
And here's the javascript/jquery:
这是 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);
});
});
}
回答by pr0t0
It turns out the problem was not with my javascript as I suspected, but rather with my JSON file. I used the URL of a different JSON file I have (that I know is valid) and everything worked fine. The file I'd like to use is too long to validate with jsonLint, and has some lengthy text values. There's probably an errant double-quote mark in there somewhere that I didn't see, and that is throwing it off.
事实证明，问题不在于我怀疑的 javascript，而在于我的 JSON 文件。我使用了我拥有的不同 JSON 文件的 URL（我知道它是有效的）并且一切正常。我想使用的文件太长而无法使用 jsonLint 进行验证，并且有一些冗长的文本值。那里可能有一个我没有看到的错误双引号，那就是扔掉它。
回答by Ed Schembor
I believe the problem is your use of this.id as the value, rather than this.name. It appears that the datalist and autocomplete functionality in HTML5 is not implemented consistently across browsers, just yet. Ex: Chrome seems to have a problem when in a datalist, an option's inner html (display value) differs from the value.
我认为问题在于您使用 this.id 作为值，而不是 this.name。似乎 HTML5 中的数据列表和自动完成功能尚未在浏览器中一致实现。例如：Chrome 在数据列表中似乎有问题，选项的内部 html（显示值）与值不同。
Changing your code to use "this.name" for both id and value works fine (in Chrome at least):
更改代码以对 id 和 value 使用“this.name”可以正常工作（至少在 Chrome 中）：
function getCars() {
$(data.osCars).each(function (idx, o) {
carsOption = "<option value='" + this.name + "'>" + this.name + "</option>";
$('#carList').append(carsOption);
});
}
See this fiddler example: http://jsfiddle.net/6HGuU/
请参阅此提琴手示例：http: //jsfiddle.net/6HGuU/
And this related question: HTML5 datalist value vs. inner-text
这个相关的问题： HTML5 datalist value vs.inner-text
If you need to retrieve the selected ID and not the name, then you can look this up as a separate step (the related question contains an answer with a proposed approach for doing exactly this).
如果您需要检索选定的 ID 而不是名称，那么您可以将其作为一个单独的步骤进行查找（相关问题包含一个答案，其中包含一个建议的方法来执行此操作）。
