Question

我正在尝试使用组显示选择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();

这未按预期运行。它返回零结果。请帮帮我。

Answer 1

如果从后端获取数据，则问题出在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});


  });

Answer 2

$('.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;
                    },
                }
            });

用组选择2 ajax结果

2 个答案: