jQuery Autocomplete 和 Angular http 返回错误

Question

所以我使用 jQuery-Autocomplete 为我的数据库使用 ajax 自动完成，这是我当前的代码：

HTML：

<input ng-keyup="searchCustomer()" id="customerAutocomplete" type="text">

角度

    $scope.searchCustomer = function () {
        $http.get('/api/customers') //this is a json return
            .then(function (response) {
                console.log(response.data); //FIRST OUTPUT
                $('#customerAutocomplete').autocomplete({
                    lookup: response.data,
                    onSelect: function (suggestion) {
                        console.log(response);
                    }
                });
            }, function (error) {
                console.log(error)
            })
    }

每当我输入内容时，控制台中的输出是这样的：

如您所见，它返回了 console.log，但有一个错误并且没有自动完成显示。

jQuery-Autocomplete的用法部分，有部分我试过了，效果很好。

var countries = [
    { value: 'Andorra', data: 'AD' },
    { value: 'Zimbabwe', data: 'ZZ' }
];

$('#autocomplete').autocomplete({
    lookup: countries,
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

但每当我通过 http 调用更改我自己的数据的国家变量时，我仍然会收到错误消息。

我检查了库的第 85 行

它是return suggestion.value.toLowerCase().indexOf(queryLowerCase) !== -1;。

所以我的第一个猜测是JSON.stringify response.data 然后我得到这个：

所以它也没有用。任何帮助将不胜感激..

Answer 1

根据jQuery-Autocompletedocumentation，来自服务器的响应必须是 JSON 格式，如下 JavaScript 对象：

{
  // Query is not required as of version 1.2.5
  "query": "Unit",
  "suggestions": [
    { "value": "United Arab Emirates", "data": "AE" },
    { "value": "United Kingdom",       "data": "UK" },
    { "value": "United States",        "data": "US" }
  ]
}

或者您需要使用transformResult 函数将您的 API 响应解析为标准响应。

我认为，在您的情况下，它应该如下所示：

// HTML

<input id="customerAutocomplete" type="text">

// 脚本

$('#customerAutocomplete').autocomplete({
  serviceUrl : '/api/customers', // your full api URL
  onSelect: function (suggestion) {
    console.log(response);
  },
  transformResult: function(response) {
    if(response.data.length > 0 ) {
      return {
        suggestions: $.map(response.data, function(dataItem) {
            return { value: dataItem.customer_name, data: dataItem.customer_id };
        })
      };
    } else {
      return {};
    }
  }
});