jQuery AutoComplete - Как получить доступ к возвращаемым значениям?

Question

Я пытаюсь отобразить значения из возвращенного JSON.Я либо получаю [Object object] для каждого элемента, либо вообще ничего не получаю.

Кто-нибудь знает, как отобразить возвращаемые значения?

$('#search-input').autocomplete({
    source: function (request, response) {
        $.getJSON("api/autocomplete.php?keyword=" + $("#search-input").val(), function (data) {
            console.log(data);
            response($.map(data, function (event, ui) {
                return {
                    label: data.name,
                    value: data.id
                };
            }));
        });
    }
});

Мой JSON выглядит так:

[{name: "item1", "id": "1"}, {name: "item2", "id": "2"} и т. Д.]

Answer 1

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

Таким образом, данные все еще [{name:"item1","id":"1"},{name:"item2","id":"2"},etc..] в функцию, но event должен получить текущий зацикленный элемент из массива.

Попробуйте что-то вроде, и не забудьте doc :

$('#search-input').autocomplete({
    source: function (request, response) {
        $.getJSON("api/autocomplete.php?keyword=" + $("#search-input").val(), function (data) {
            console.log(data);
            response($.map(data, function (elementOfArray, indexInArray ) {
                return {
                    label: elementOfArray.name,
                    value: elementOfArray.id
                };
            }));
        });
    }
});

Кроме того, ES6 реализует map . Лучше использовать функцию no-jquery, когда это возможно:

response(data.map((elementOfArray, indexInArray) => {
    return {
        label: elementOfArray.name,
        value: elementOfArray.id
    };
}));

Snippetпример без ajax

data = [{name:"item1","id":"1"},{name:"item2","id":"2"}]

console.log(data.map((item, idx) => {
   return {
      label: item.name,
      value: item.id
   };
}));