Заполните параметры списка данных, просматривая файл JSON

Question

Заполните параметры списка данных, просматривая файл JSON

0

Я пытаюсь создать окно поиска, которое будет по существу автозаполняться на основе ввода пользователем пары ключ-значение в 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);
        });
    });
}

pr0t0 17 дек. 2013, в 04:45

Источник

Теги:

javascript

jquery

json

html5

2 ответа

0

Я считаю, что проблема заключается в том, что вы используете this.id как значение, а не this.name. Похоже, что функциональность datalist и autocomplete в HTML5 еще не реализована последовательно в браузерах. Пример: Chrome, похоже, имеет проблемы, когда в datalist параметр inner html (отображаемое значение) отличается от значения.

Изменение кода для использования "this.name" для id и value работает нормально (в Chrome по крайней мере):

function getCars() {
    $(data.osCars).each(function (idx, o) {
        carsOption = "<option value='" + this.name + "'>" + this.name + "</option>";
        $('#carList').append(carsOption);
    });
}

См. Этот пример скрипача: http://jsfiddle.net/6HGuU/

И этот связанный вопрос: значение datalist HTML5 по сравнению с внутренним текстом

Если вам нужно получить выбранный идентификатор, а не имя, вы можете посмотреть его как отдельный шаг (связанный вопрос содержит ответ с предлагаемым подходом для выполнения именно этого).

Ed Schembor 17 дек. 2013, в 02:03

0

Ну, я попытался изменить this.id на this.name, но, похоже, он не дал никакого эффекта (я также использую Chrome). Я посмотрел на созданную вами скрипку, но она, похоже, не сработала, и я не уверен, что мы на одной странице с тем, чего я пытаюсь достичь. Я ищу динамически создаваемые теги параметров, которые появляются между тегами списка данных. Это происходит с тобой на скрипке? Похоже, это не для меня. Идентификатор не является строго обязательным ... Я просто предпочитаю использовать эти строки и строки при последующем поиске во внешнем файле json.
pr0t0 17 дек. 2013, в 16:58

Ещё вопросы

Ну, я попытался изменить this.id на this.name, но, похоже, он не дал никакого эффекта (я также использую Chrome). Я посмотрел на созданную вами скрипку, но она, похоже, не сработала, и я не уверен, что мы на одной странице с тем, чего я пытаюсь достичь. Я ищу динамически создаваемые теги параметров, которые появляются между тегами списка данных. Это происходит с тобой на скрипке? Похоже, это не для меня. Идентификатор не является строго обязательным ... Я просто предпочитаю использовать эти строки и строки при последующем поиске во внешнем файле json.

pr0t0 · Accepted Answer · 2013-12-18T13-41-00.000Z

Оказывается, проблема связана не с моим javascript, как я подозревал, а с моим файлом JSON. Я использовал URL-адрес другого JSON файла, который у меня есть (который я знаю, действительно), и все работает нормально. Файл, который я хотел бы использовать, слишком длинный для проверки с помощью jsonLint и имеет длинные текстовые значения. Там, вероятно, есть ошибочная метка двойной кавычки, где я не видел, и это отбрасывает ее.