Select2 通过 AJAX 加载 JSON 结果集并在本地搜索

Posted 2023-05-07

【中文标题】Select2 通过 AJAX 加载 JSON 结果集并在本地搜索

【英文标题】：Select2 load JSON resultset via AJAX and search locally

【发布时间】：2014-10-09 21:01:44

【问题描述】：

到目前为止，我一直在使用 Select2 的普通 AJAX 方法来搜索和过滤服务器端的数据，但现在我有一个用例，我想在打开选择时通过 AJAX 检索所有结果，然后使用这些结果（现在存储本地）进行搜索和过滤。

我在网上搜寻了如何执行此操作的示例，但我发现很多人说应该使用 Query 方法而不是 AJAX 帮助器。不幸的是，我没有找到任何示例。

到目前为止，我所管理的只是基本的：

$('#parent').select2(
  placeholder: "Select Parent",
  minimumInputLength: 0,
  allowClear: true,
  query: function (query) 
      //console.log(query);
      query.callback(data);
  
);

data = 
 more: false,
 results: [
     id: "CA", text: "California" ,
     id: "AL", text: "Alabama" 
 ]

正在将数据传递给 select，但未实现查询过滤。

我正在努力理解 select2 文档，如果有任何帮助或示例链接，我将不胜感激。

【问题讨论】：

您必须按照此处的说明实现过滤器服务器端：***.com/questions/15232476/…

嗨克里斯蒂安，感谢您的评论。我已经有使用 select2 的服务器过滤。不幸的是，对于这个特定的用例，服务器过滤不是一种选择，这就是我追求客户端过滤的原因。我知道这是可以做到的。

【参考方案1】：

尝试以下方法 - 将 json 数据预加载到局部变量中，并在准备好时将其绑定到 select2 对象

<script>
function format(item)  return item.text; 
var jresults;
$(document).ready(function() 
    $.getJSON("http://yoururl.com/api/select_something.json").done(
        function( data ) 
            $.jresults = data;
            $("#parent").select2(
                formatResult: format,
                 formatSelection: format,
                 data: $.jresults 
            );
        
    )
);
</script>

【讨论】：

感谢您的回答。是的，我确实得到了类似的解决方案

除了调用外部格式化程序，您还可以执行以下操作：data: results: data, text: 'myKey'