JQuery автозаполнения и Угловое HTTP возвращает ошибки

Question

Так я использую AJAX автозаполнения для моей базы данных с помощью jQuery-Autocomplete и это мой текущий код:

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