无法将对象数组映射到 jQuery 自动完成

Question

我正在将 jQuery 自动完成插件添加到我的项目中。我有一个源值，它是一个对象数组（来自 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);   

      }
});

无法将对象数组映射到 jQuery 自动完成

Unable to map array of object into jQuery autocomplete

javascript

jquery

autocomplete