选择2个带组的ajax结果 - Select 2 ajax result with group

Select 2 ajax result with group

本文关键字：ajax 结果 2个选择 | 更新日期: 2023-09-27

我正在尝试显示选择2个带有组的搜索ajax结果。但它不显示任何结果。我正在使用WordPress Ajax。

这是我的JS代码，

jQuery('select.select2-group_filters-dropdown').select2({
            //placeholder: "Select pages / post / categories",
            ajax: {
                url: ajaxurl,
                dataType: 'json',
                method: 'post',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term, // search term
                        page: params.page,
                        action: 'cp_get_posts_by_query'
                    };
                },
                results: function (data, page) {
                        return {results: data};
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                },
                cache: true
            },
            minimumInputLength: 0,
        });

我从PHP返回的数据是，

$searchString = $_POST['q'];
$childdata = array();
$query = new WP_Query( array( 's' => $searchString ) );
if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();
        $title = get_the_title();
        $ID = get_the_id();
        $childdata[] = array('id' => "post-".$ID, 'text' => $title );
    }
} else {
     $data[] = array('id' => '0', 'text' => 'No results Found');
}
$data = array(
    "text" => "posts",
    "children" => $childdata
);
wp_reset_postdata();
// return the result in json
echo json_encode( $data );
die();

这未按预期运行。它返回零结果。请帮我解决这个问题。

如果您从后端获取数据，则问题出在 select2 配置中。尝试先进行 ajax 调用，然后用数据填充 select2。像这样索梅通（不确定这对你有用，我不能在这里测试）：

jQuery.ajax({
url: ajaxurl,
dataType: 'json',
method: 'post',
delay: 250,
data: function (params) {
    return {
        q: params.term, // search term
        page: params.page,
        action: 'cp_get_posts_by_query'
    }
    }
  }).done(function( data ) {
jQuery('select.select2-group_filters-dropdown').select2({ data:data, minimumInputLength: 0});

  });

$('.select2').select2({
                allowClear: true,
                ajax: {
                    url: function (params) {
                        return "api/endpoint/?user=" + params.term;
                    },
                    dataType: 'json',
                    delay: 500,
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
    /* NOTE: return in this format i.e. 
    * key = **text** : value = username
    * key = **id**   : value = id
    */
                                    text: item.username,
                                    id: item.id
                                }
                            })
                        };
                    },
                    minimumInputLength: 1,
                    minimumInputLength: 3,
                    cache: true,
                    escapeMarkup: function (markup) {
                        return markup;
                    },
                    templateResult: function (item) {
                        return item.username;
                    },
                    templateSelection: function (item) {
                        return item.username;
                    },
                }
            });