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);   

      }
});

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

2 个答案: