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

Question

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.

I am still pretty new to jquery and json, so I'm WAY open to suggestions.

Here's the json. The list contains 1450 items if that's relevant:

{ "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:

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

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

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.

Answer 2

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.

Changing your code to use "this.name" for both id and value works fine (in Chrome at least):

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/

And this related question: 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).