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

【问题标题】：Select2 load JSON resultset via AJAX and search locallySelect2 通过 AJAX 加载 JSON 结果集并在本地搜索
【发布时间】：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 文档，如果有任何帮助或示例链接，我将不胜感激。

【问题讨论】：

您必须按照此处的说明实现过滤器服务器端：stackoverflow.com/questions/15232476/…
嗨克里斯蒂安，感谢您的评论。我已经有使用 select2 的服务器过滤。不幸的是，对于这个特定的用例，服务器过滤不是一种选择，这就是我追求客户端过滤的原因。我知道这是可以做到的。

标签： javascript jquery ajax json jquery-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' }