Select2下拉如何通过AJAX加载结果

Question

我有一个简单的select2框加载下拉菜单。

但是，每次使用AJAX调用的结果打开选择菜单时，重新加载下拉菜单的最佳方式是什么？ Ajax调用将返回

<option value=1> 
<option value=2> 

等

我通过对选择2文档的AJAX例子已经外观，但它看起来什么，我需要一点点过于复杂。 TIA

Answer 1

查看加载远程数据示例在Select2 webpage上。

它会在每次打开时使用ajax动态加载选择列表中的选项。

$("#e6").select2({ 
     placeholder: "Search for a movie", 
     minimumInputLength: 1, 
     ajax: { // instead of writing the function to execute the request we use Select2's convenient helper 
      url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", 
      dataType: 'jsonp', 
      data: function (term, page) { 
       return { 
        q: term, // search term 
        page_limit: 10, 
        apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working 
       }; 
      }, 
      results: function (data, page) { // parse the results into the format expected by Select2. 
       // since we are using custom formatting functions we do not need to alter remote JSON data 
       return {results: data.movies}; 
      } 
     } 
    }); 

Answer 2

假设u有HTML

<p> 
    Hidden field value set in the following format: 
    <br /> 
    <em>'34:Donnie Darko,54:Heat,27:No Country for Old Men' 
    </em></p> 
<input type='hidden' id="e6" style="width: 500px;" value="34:Donnie Darko,54:Heat,27:No Country for Old Men" /> 
<br /> <button id="save">Save</button> 
<p> 
After it's initialised, the hidden field value will change to:<br /> 
<em>'34,54,27'</em> 
<br /> 
That is the value sent to the server 
</p>​ 

和选择2阿贾克斯

function MultiAjaxAutoComplete(element, url) { 
    $(element).select2({ 
     placeholder: "Search for a movie", 
     minimumInputLength: 1, 
     multiple: true, 
     id: function(e) { return e.id+":"+e.title; }, 
     ajax: { 
      url: url, 
      dataType: 'json', 
      data: function(term, page) { 

       return { 
        q: term, 
        page_limit: 10, 
        apikey: "z4vbb4bjmgsb7dy33kvux3ea" //my own apikey 
       }; 
      }, 
      results: function(data, page) { 
       alert(data); 
       return { 
        results: data.movies 
       }; 
      } 
     }, 
     formatResult: formatResult, 
     formatSelection: formatSelection, 
     initSelection: function(element, callback) { 
      var data = []; 
      $(element.val().split(",")).each(function(i) { 
       var item = this.split(':'); 
       data.push({ 
        id: item[0], 
        title: item[1] 
       }); 
      }); 
      //$(element).val(''); 
      callback(data); 
     } 
    }); 
}; 

function formatResult(movie) { 
    return '<div>' + movie.title + '</div>'; 
}; 

function formatSelection(data) { 
    return data.title; 
}; 



MultiAjaxAutoComplete('#e6', 'http://api.rottentomatoes.com/api/public/v1.0/movies.json'); 

$('#save').click(function() { 
    alert($('#e6').val()); 
}); 

试着做multiajax与此呼！ 参考 - http://jsfiddle.net/JpvDt/112/

Answer 3

试试这个：

$(document).ready(function() { 
     $('#Registration').select2({ 
      placeholder: 'Select a registration', 
      allowClear: true, 
      ajax: { 
       quietMillis: 10, 
       cache: false, 
       dataType: 'json', 
       type: 'GET', 
       url: '@Url.Action("GetItems", "ItemsController")', //This asp.net mvc -> use your own URL 
       data: function (registration, page) { 
        return { 
         page: page, 
         pageSize: 100, 
         registration: registration, 
         otherValue: $("#OtherValue").val() // If you have other select2 dropdowns you can get this value 
        }; 
       }, 
       results: function (data, page) { 
        var more = (page * pageSize) < data.total; // whether or not there are more results available 
        return { results: data.dataItems, more: more }; // notice we return the value of more so Select2 knows if more results can be loaded 
       } 
      }, 
      formatResult: FormatResult, 
      formatSelection: FormatSelection, 
      escapeMarkup: function (m) { return m; } 
     }); 
    }); 

    function FormatResult(item) { 
     var markup = ""; 
     if (item.name !== undefined) { 
      markup += "<option value='" + item.id + "'>" + item.name + "</option>"; 
     } 
     return markup; 
    } 

    function FormatSelection(item) { 
     return item.name; 
    } 

Answer 4

如果你想显示与预加载的JSON默认下拉，让你点击提交您所期望的下拉与填充数据的那一刻在没有输入单个字母的情况下显示，设置minimumInputLength：0并且像魅力一样工作。

它会触发JSON，如果您的任务是“使用select2加载焦点上的JSON”。

我已经添加了代码，但由于无法使用AJAX在代码片段中远程检索JSON，我无法使代码片段工作。

请记住，这是您添加到您的代码的解决方案不使用下面列出的。我用它来描述修复。

---

$(".myContainer").select2({ 
    ajax: { 
     url: 'myJSONpath', 
     dataType: 'json', 
     delay: 250, 
     data: function(params) { 
     return { 
     q: params.term, // search term 
     page: params.page 
     }; 
     }, 
    minimumInputLength: 0, // so here is a trick 0 will trigger ajax call right when you click on field 
    processResults: function(data, params) { 
     //process your results 
    }, 

....等等一个继续与其他属性...