Populate datalist options by iterating through JSON file

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

score 2 · Accepted Answer · answered Dec 18 '13 at 16:33

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.

score 0 · Answer 2 · edited May 23 '17 at 12:28

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

Well, I tried changing this.id to this.name, but it did not appear to have any effect (I also use Chrome). I looked at the fiddle you created, but it didn't appear to function and I'm not sure we're on the same page about what I'm trying to achieve. I'm looking for the dynamically created option tags to appear between the datalist tags. Is that happening for you with the fiddle? It doesn't appear to be for me. The ID isn't strictly a necessity...I just prefer to use those vs. strings when searching the external json file afterward. — pr0t0, Dec 17 '13 at 16:58

Populate datalist options by iterating through JSON file

2 Answers2