マテリアライズオートコンプリートajax

Question

materialize autocompleteプラグインを使用して、複数のタグをオートコンプリートで作成しています。プラグインはうまく動作しますが、あらかじめ定義された配列として渡されたデータでのみ動作します。データがajax呼び出しから渡された場合、プラグインは結果がないかのようにオプション付きのドロップダウンを表示しません。結果は実際にはキャッシュされ（キャッシュオプションを使用して）、検索フレーズを再入力した後にのみドロップダウンとして表示されます。

要約すると、オートコンプリートプラグインは、ajaxがリクエストを完了してデータを配信するのを待たず、最初の試行ではドロップダウンが表示されません。 これらのプラグインがajax呼び出しで取得されたら、このプラグインにドロップダウンの提案を表示する方法はありますか？

プラグインの初期化：DBから値を取得するための

autocomplete = $('#multipleInput').materialize_autocomplete({ 
     cacheable: true, 
     throttling: true, 
     multiple: { 
      enable: true, 
      maxSize : 5 
     }, 
     appender: { 
      el: '.ac-users' 
     }, 
     dropdown: { 
      el: '#multipleDropdown' 
     }, 
     getData: function (value, callback) { 

      callback(value,getAjaxDropdowValuesAutocomplete(value)); 
     } 
}); 

が機能：

function getAjaxDropdowValuesAutocomplete(value){ 
     var returnArray = [], 
     dataArray, 
     innerObject = {}, 
     postParamsObj = {"search" : value}; 

     $.ajax({ 
      type: "POST", 
      url: '/search-elements', 
      data: postParamsObj, 
      success: function(msg) { 
       dataArray = msg['data']; 

       for(var i = 0;i < dataArray.length; i++){ 
        innerObject = {}; 
        innerObject["id"] = dataArray[i][0]; 
        innerObject["text"] = dataArray[i][1] + " " + dataArray[i][2]; 
        returnArray.push(innerObject); 
       } 

       // returnArray format [{ 'id': '1', 'text': 'Johnny Bravo' }]  

      }, 
      error : function(msg){ 
      } 
     }); 

    return returnArray; 
} 

Answer 1

あなたは、AJAX要求の代わりに、他の方法で回避の成功コールバック時にオートコンプリートを初期化してみてください。そうすれば、オートコンプリートイベントのバインドを開始する前にデータを確実に取得できます。例えば

function getAjaxDropdowValuesAutocomplete(value) { 
    var returnArray = [], 
     dataArray, 
     innerObject = {}, 
     postParamsObj = {"search": value}; 

    $.ajax({ 
     type: "POST", 
     url: '/search-elements', 
     data: postParamsObj, 
     success: function (msg) { 
      dataArray = msg['data']; 

      for (var i = 0; i < dataArray.length; i++) { 
       innerObject = {}; 
       innerObject["id"] = dataArray[i][0]; 
       innerObject["text"] = dataArray[i][1] + " " + dataArray[i][2]; 
       returnArray.push(innerObject); 
      } 
      // returnArray format [{ 'id': '1', 'text': 'Johnny Bravo' }] 
      autocomplete = $('#multipleInput').materialize_autocomplete({ 
       cacheable: true, 
       throttling: true, 
       multiple: { 
        enable: true, 
        maxSize: 5 
       }, 
       appender: { 
        el: '.ac-users' 
       }, 
       dropdown: { 
        el: '#multipleDropdown' 
       }, 
       getData: returnArray 
      });  

     }, 
     error: function (msg) { 
     } 
    }); 

    return returnArray; 
}