select2搜索json结果不起作用

Question

我已经为这个问题寻找了几个小时的答案，但没有找到与我的案例相关的任何内容。

我的设置： 我创建了一个自定义 TinyMCE 按钮，其中包含 WordPress 主题的弹出窗口，允许用户从下拉列表中选择自定义帖子类型帖子（在本例中为“客户评论”），然后将其 ID 插入短代码中。由于这个主题将运行的网站有超过 1,000 条评论，我认为最好对下拉列表的数据进行 json 编码，然后使用 select2 搜索有限结果列表（分页结果）并保留整个内容从炸毁。除了 2 项之外，所有这些都正常运行：

1. 显示 json 编码数据，但是当我输入搜索词时，select2 下拉列表显示所有评论的列表，其中第一个被选中。即使搜索到的文本在列表中，它也找不到结果

2. 从上面看，一旦我输入搜索词，select2 会显示所有结果，而不是仅显示 10 个或我设置的任何限制。

这是我对数据进行 json 编码的方式（在一个名为 bpl_content.php 的文件中）：

$args       = array('post_type' => 'customer_reviews', 'posts_per_page' => -1, 'fields' => 'ids');
$posts      = get_posts($args);

if( $posts ) :

    $reviews = array();

    foreach( $posts as $post ) : setup_postdata( $post );

        $title  = get_the_title();
        $the_ID = get_the_ID();

        $reviews[] = array (
            'id'    => $the_ID,
            'text'  => $title
        );

    endforeach;

endif;

echo json_encode( $reviews )

返回

[{"id":12286,"text":"John Doe"},{"id":12285,"text":"Jane Doe"},...]

（返回的商品超过 800 个，所以上面只显示了 2 个，但你明白了）

这是我用来让 菜单填充 json 数据的 javascript：

$(".js-data-example-ajax").select2({
    placeholder: "Select a Review",
    ajax: {
        url: "_bpl_content/bpl_content.php",
        type: 'POST',
        params: {
            contentType: 'application/json; charset=utf-8'
        },
        dataType: 'json',
        delay: 250,
        data: function (term, page) {
            return JSON.stringify({ q: term, page_limit: 10 });
        },
        processResults: function (data) {
            return {
                results: data
            };
        },
        cache: true
    },
    minimumInputLength: 3
});

除了搜索和分页之外，我一生都无法弄清楚为什么一切正常。有什么想法吗？

Answer 1

您的服务器端代码中似乎没有任何代码用于过滤和分页结果。 Select2 意识到在服务器端执行此操作效率更高，并希望开发人员在那里实现它。搜索词将作为q 传入，页面将作为page 传入（如果可用）。

如果你不想在服务器端实现搜索和分页，或者只有一个返回 all 结果的端点，你仍然可以解决它。您只需将 Select2 初始化为 JSON 结果为data，而不是使用 AJAX 功能。

$.ajax({
  url: "_bpl_content/bpl_content.php",
  type: 'POST',
  contentType: 'application/json; charset=utf-8'
}).then(function (response) {
  $(".js-data-example-ajax").select2({
    placeholder: "Select a Review",
    minimumInputLength: 3,
    data: response
  });  
});