BS Typeaheadは結果を表示しません

Question

私はBootstrap Typeaheadでこの問題を抱えています。

HTMLマークアップ：

<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)" 
}] 

問題がある：私は何も見えない:(何も表示されません。先読みは機能しません。

コンソールで

、私は

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を取得する必要があります。 textの値を別の文字列配列にプッシュして返します。私はまだコードをテストしていないが、それはあなたのために動作するはずです。

もう1つの問題は、非同期のAJAX呼び出しを行っていることです。だからこそ、あなたは成功からの不確定性を持っています。