使用Select2加載遠程數據一次

Question

正如標題所示，我想只加載一次遠程數據。 我想到了加載具有獨立AJAX調用數據，並設置「本地」的控制，但不知道是否有更多的「中建」的方式做到這一點...

Answer 1

的解決方案可以在這裏找到：

https://github.com/ivaynberg/select2/issues/110

$("#selIUT").select2({ 
    cacheDataSource: [], 
    placeholder: "Please enter the name", 
    query: function(query) { 
     self = this; 
     var key = query.term; 
     var cachedData = self.cacheDataSource[key]; 

     if(cachedData) { 
      query.callback({results: cachedData.result}); 
      return; 
     } else { 
      $.ajax({ 
       url: '/ajax/suggest/', 
       data: { q : query.term }, 
       dataType: 'json', 
       type: 'GET', 
       success: function(data) { 
       self.cacheDataSource[key] = data; 
       query.callback({results: data.result}); 
       } 
      }) 
     } 
    }, 
    width: '250px', 
    formatResult: formatResult, 
    formatSelection: formatSelection, 
    dropdownCssClass: "bigdrop", 
    escapeMarkup: function (m) { return m; } 
}); 

編輯：

我會誤解你的問題。如果你想加載所有數據一次，那麼使用Select2，沒有內置的功能來做到這一點。

您的建議是做一個單一的查詢，然後在Select2中使用存儲的數據將是一條路。

Answer 2

要一次加載數據：

假設：

• 你在，供應對象

• 的JSON數組的數組包含有在對象REST API端點/服務至少有一個「名稱」和「ID」屬性。例如：

  [{"id": 0, "name": "Foo"}, {"id": 1, "name": "Bar"}] 
  

• 你想存儲陣列作爲全球「services_raw」

首先，我們的函數加載數據，並創建全球「services_raw」（又名「window.services_raw 「）：

fetchFromAPI = function() { 
     console.log("fetchFromAPI called"); 
     var jqxhr = $.ajax(
      { 
       dataType:'json', 
       type: 'GET', 
       url: "/services", 
       success: function(data, textStatus, jqXHR) { 
        services_raw = data; 
        console.log("rosetta.fn.fetchServicesFromAPI SUCCESS"); 
        rosetta.fn.refreshServicesSelect(); 
       }, 
       error: function(jqXHR, textStatus, errorThrown) { 
        console.log("Error inside rosetta.fn.fetchServicesFromAPI", errorThrown, textStatus, jqXHR); 
        setTimeout(rosetta.fn.fetchServicesFromAPI(), 3000); // retry in 3 seconds 
       } 
      } 
     ) 
      .done(function() { 
       console.log("success"); 
       console.log(jqxhr); 
      }) 
      .fail(function() { 
       console.log("error"); 
      }) 
      .always(function() { 
       console.log("complete"); 
      }); 

     // Perform other work here ... 

     // Set another completion function for the request above 
     jqxhr.always(function() { 
      console.log("second complete"); 
     }); 
    }; 

其次，我們選擇二實例代碼，改變我們的數據轉換爲選擇二可以處理的格式：

refreshServicesSelect = function() { 
    // ref: http://jsfiddle.net/RVnfn/2/ 
    // ref2: http://jsfiddle.net/RVnfn/101/ # mine 
    // ref3: http://jsfiddle.net/RVnfn/102/ # also mine 

    console.log('refreshServicesSelect called'); 
    $("#add-service-select-service").select2({ 
     // allowClear: true 
     data: function() { 
      var arr = []; // container for the results we're returning to Select2 for display 

      for (var idx in services_raw) { 
       var item = services_raw[idx]; 
       arr.push({ 
        id: item.id, 
        text: item.name, 
        _raw: item // for convenience 
       }); 
      } 
      return {results: arr}; 
     } 
    }); 
}; 

下面是在HTML中選擇二元素應該是什麼樣子呼叫之前，上述功能：

<input id="add-service-select-service" type="hidden" style="width:100%"> 

要使用所有這一切，請致電（在JS）：

window.fetchFromAPI(); 
window.refreshServicesSelect(); 

最後，這裏是一個JSFiddle，你可以用類似的東西玩：http://jsfiddle.net/RVnfn/102/

基本上，在我上面的例子中，我們只是使用ajax來填充等價物t在小提琴中的window.pills。

希望這有助於:)

請回復，如果你知道如何通過選擇二做到這一點阿賈克斯的功能，因爲這將是一個有點短。

Answer 3

這是選擇二V4.0.3：

我有同樣的問題，並通過觸發AJAX調用和使用的初始化數據陣列的數據返回了周圍。

// I used an onClick event to fire the AJAX, but this can be attached to any event. 
// Ensure ajax call is done *ONCE* with the "one" method. 
$('#mySelect').one('click', function(e) { 
    // Text to let user know data is being loaded for long requests. 
    $('#mySelect option:eq(0)').text('Data is being loaded...'); 
    $.ajax({ 
     type: 'POST', 
     url: '/RetrieveDropdownOptions', 
     data: {}, // Any data that is needed to pass to the controller 
     dataType: 'json', 
     success: function(returnedData) { 
      // Clear the notification text of the option. 
      $('#mySelect option:eq(0)').text(''); 
      // Initialize the Select2 with the data returned from the AJAX. 
      $('#mySelect').select2({ data: returnedData }); 
      // Open the Select2. 
      $('#mySelect').select2('open'); 
     } 
    }); 
    // Blur the select to register the text change of the option. 
    $(this).blur(); 
}); 

這對我的想法很有效。希望這有助於人們搜索相同的問題。