javascript - Populate datalist options by iterating through JSON file - Stack Overflow

admin管理员组

文章数量:1415645

I'm trying to create a search box that will essentially autoplete 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 autoplete="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);
        });
    });
}

I'm trying to create a search box that will essentially autoplete 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 autoplete="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);
        });
    });
}

• javascript
• jquery
• json
• html

Share Improve this question Follow asked Dec 17, 2013 at 2:46 pr0t0pr0t0 49522 gold badges66 silver badges1616 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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.

I believe the problem is your use of this.id as the value, rather than this.name. It appears that the datalist and autoplete 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/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).

Enough set this code in begin of page, and after set #carList id for datalist options! I maked this! and is working very well!

$(document).ready(function (){
     url = 'js/cars.json';
     $.getJSON(url, function(data) {
     $(data.osCars).each(function(obj) {
          carsOption = "<option value=\"" + data.registros[obj]['id'] + "\">" + data.registros[obj]['name']  + "</option>";
          $('#carList').append(carsOption)
    })
})

本文标签： javascriptPopulate datalist options by iterating through JSON fileStack Overflow