Select2 加载远程数据与占位符下拉列表的混合

Posted 2023-05-07

【中文标题】Select2 加载远程数据与占位符下拉列表的混合

【英文标题】：mix of Select2 Loading Remote Data with Placeholders dropdown

【发布时间】：2012-09-05 04:57:33

【问题描述】：

我是 javascript、jQuery、Ajax 和 JSON 世界的新手。

我需要做的是混合使用 SELECT2 的 2 个选项

占位符

$("#e2_2").select2(
    placeholder: "Select a State"
);

和

加载远程数据

$("#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
             ;
         
     ,
     formatResult: movieFormatResult, // omitted for brevity, see the source of this page
     formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
     dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
 );

从 Select 网站可以看出，这些选项完全不同。 当我单击加载远程数据字段时，它会打开一个搜索选项。但我不想那样。我希望下拉菜单中包含 PlaceHolder 示例中的可用选项。

在占位符示例中，下拉菜单中可用的选项在 html 中进行了硬编码。 我需要的是，当您打开时，它会转到 json 文件并返回 json 上可用的信息。

理想的做法是将占位符 Select2 的 UI 与另一个 Select2 示例中的加载远程日期的功能（在服务器上获取 json）一起使用。

有什么想法吗？如果两者不能结合，我愿意接受任何超快速的 Ajax 解决方案。

【问题讨论】：

或许值得看看 angularui：angular-ui.github.com/#directives-select2

【参考方案1】：

如果您只需要通过 ajax 将数据加载到您的 select2（无需通过远程 api 搜索），您可以这样做：

$.get( "/path/to/your/data.json", function(data)window.ajaxData=data;);
$("#e2_2").select2(data: window.ajaxData, placeholder: "Select a State");

（使用全局变量通常是不好的做法，但这只是一个例子）