BS Typeahead не отображает результаты

Question

У меня есть эта проблема с Bootstrap Typeahead.

HTML Markup:

<div class="form-group"> 
    <label for="">Recipients</label> 
    <input id="recipients" name="recipients" 
     autocomplete="off" 
     class="form-control" 
     data-role="tagsinput"> 
</div> 

JavaScript:

$('#recipients').tagsinput({ 
    allowDuplicates: false, 
    trimValue: true, 
    confirmKeys: [13, 44], 
    typeahead: { 
     source: function(queryForHints) { 
      if (queryForHints.length < 4) 
       return ''; 
      var parameters = { 
       'queryForHints': queryForHints 
      }; 
      jQuery.ajax({ 
       url: "/xxxx/xxxx", 
       data: parameters, 
       type: "POST", 
       dataType: "json", 
       success: function(data) { 
        return (data); 
       }, 
       error: function(data) { 
        console.log("error for xxxxx/xxxxx"); 
       }, 
       async: true 
      }); 
     } 
    } 
}); 

После Ajax позвонить я получаю этот массив:

[{ 
    "value": "+393334029137", 
    "text": "Dean Leandra (+393334029137)" 
}, { 
    "value": "+393333419836", 
    "text": "Alfonso Erasmus (+393333419836)" 
}, { 
    "value": "+393173833341", 
    "text": "Travis Aquila (+393173833341)" 
}, { 
    "value": "+393334998841", 
    "text": "Conan Preston (+393334998841)" 
}] 

Проблема заключается в том: Я ничего не вижу :(ничего не появляется . typeahead не работает.

В консоли, я получаю эту ошибку

bootstrap-tagsinput.js:331 Uncaught TypeError: Cannot read property 'success' of undefined

Можете ли вы помочь мне решить эту проблему?

Answer 1

success: function(data) { 
    var sourceData = []; 
    for (var i = 0; i < data.length; i++) { 
     sourceData.push(data[i].text); 
    } 
return (sourceData); 

Что вы имеете от вашего ответа JSON - массив объектов. Вы хотите видеть text в качестве предположения, которое я предполагал. Таким образом, вам нужно получить text от вашего объекта, потому что источник typeahead ожидает массив строк. Нажмите text значения в другой массив строк и верните его. Я еще не тестировал код, но он должен работать для вас.

Еще одна проблема заключается в том, что вы делаете вызов AJAX, который является асинхронным. Вот почему вы не определились с успехом.