Materialize autocomplete ajax

Question

Tôi đang sử dụng plugin materialize autocomplete để tạo nhiều thẻ nhập với tính năng tự động hoàn tất. Plugin hoạt động tốt, nhưng chỉ với dữ liệu được truyền qua như một mảng được xác định trước. Nếu dữ liệu được truyền từ cuộc gọi ajax, plugin không hiển thị menu thả xuống có các tùy chọn như thể không có kết quả nào. Có kết quả trong thực tế, chúng được lưu trữ (sử dụng tùy chọn bộ nhớ cache) và được hiển thị dưới dạng danh sách thả xuống chỉ sau khi nhập lại cụm từ tìm kiếm.

Để tổng hợp, plugin tự động hoàn tất không chờ ajax hoàn thành yêu cầu và phân phối dữ liệu và đó là lý do tại sao trình đơn thả xuống không được hiển thị lúc đầu thử. Có cách nào để nhận plugin này để hiển thị các đề xuất trong trình đơn thả xuống khi chúng được truy lục một lần gọi ajax không?

Plugin khởi:

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

Chức năng để có được giá trị từ DB:

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

Bạn có thể thử khởi tạo autocomplete trong callback thành công của yêu cầu ajax thay vì cách khác xung quanh. Bằng cách đó, bạn chắc chắn có dữ liệu trước khi nó cố bắt đầu ràng buộc các sự kiện tự động hoàn thành. ví dụ.

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