Невозможно отобразить массив объекта в автозаполнение jQuery

Question

Я добавляю плагин jQuery Autocomplete в свой проект.У меня есть исходное значение, которое представляет собой массив объектов (из базы данных MySQL).Я не могу отобразить их в желаемом формате автозаполнения.

Это данные, которые необходимо отобразить:

[{
  "value": "730",
  "label": "iPhone"
}, {
  "value": "731",
  "label": "Screen Protector"
}, {
  "value": "732",
  "label": "Maxboost"
}, {
  "value": "733",
  "label": "JETech"
}, {
  "value": "734",
  "label": "Mr Shield"
}]

$("#product_one").autocomplete({
  source: $.ajax({
    type: "GET",
    url: "/wp-json/product/product-info/",
    success: function(res) {
      $.each(res, function(key, val) {
        return {
          "label": val.label,
          "value": val.value
        }
      });
    }
  });
});

Любое предложение или изменение вопроса будет оценено.

Answer 1

Проблема заключается в том, что вы предоставляете source объект jqXHR, а не массив, строку или функцию, как ожидается ( docs )

Учитывая использование AJAX,для вас будет разумнее использовать функцию, которая использует аргументы request и response.Также обратите внимание, что поскольку данные, которые вы извлекаете, уже имеют правильный формат (т. Е. Массив объектов со свойствами label и value), вы можете предоставить их непосредственно response() без необходимости их циклического просмотра.Попробуйте это:

$("#product_one").autocomplete({
  source: function(request, response) {
    $.ajax({
      type: "GET",
      url: "/wp-json/product/product-info/",
      success: function(data) {
        response(data);
      }
    });
  }
});

Answer 2

Сначала вы должны загрузить свои данные, а затем установить их как источник автозаполнения.

$.ajax({               
      type:"GET",
      url: "/wp-json/product/product-info/",
      success:function(res){

           //Based on your object creation, it looks that you can directly use the response
           $( "#product_one" ).autocomplete(res);   

      }
});