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调用中更改我自己数据的countries变量时，我仍然会收到错误。

我检查了库的第85行

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

所以我的第一个猜测是JSON.stringify response.data，然后我明白了：

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

Answer 1

根据jQuery-Autocomplete documentation来自服务器的响应必须是遵循JavaScript对象的JSON格式，如下所示：

{
  // 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 {};
    }
  }
});

jQuery Autocomplete和Angular http返回错误

1 个答案: