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数据的<select>菜单的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(如果可用)传入.

如果您不想在服务器端实现搜索和分页,或者只有一个返回所有结果的端点,您仍然可以解决它.您只需要使用JSON结果初始化Select2,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
  });  
});