select2 搜索 json 结果无效
select2 search of json results not working
几个小时以来,我一直在寻找这个问题的答案,但没有找到与我的案例相关的任何内容。
我的设置:
我创建了一个带有 WordPress 主题弹出窗口的自定义 TinyMCE 按钮,允许用户从下拉列表中 select 自定义 post 类型 post(在本例中为 "Customer Review") 然后将其 ID 插入简码中。由于该主题 运行 所在的网站有超过 1,000 条评论,我认为最好 json 对下拉列表的数据进行编码,然后使用 select2 搜索有限结果列表(分页结果)并防止整个事情爆炸。除了 2 个项目外,所有这些都运行良好:
显示 json 编码数据,但是当我输入搜索词时,select2 下拉列表显示所有评论的列表,第一个 select编辑。它没有找到结果,即使搜索的文本在列表中
从上面开始,一旦我输入搜索词,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 )
哪个returns
[{"id":12286,"text":"John Doe"},{"id":12285,"text":"Jane Doe"},...]
(返回的商品超过800件,所以上面只显示了2件,但你明白了)
这是我用来让我的
$(".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
});
除了搜索和分页,我一辈子都弄不明白为什么一切正常。有什么想法吗?
您的服务器端代码中似乎没有任何用于过滤和分页结果的代码。 Select2 意识到在服务器端完成此操作效率更高,并希望开发人员在服务器端实现它。搜索词将作为 q
传递,页面将作为 page
(如果可用)传递。
如果您不想在服务器端实现搜索和分页,或者只有一个端点 returns all 结果,您仍然可以解决它.您只需要使用 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
});
});
几个小时以来,我一直在寻找这个问题的答案,但没有找到与我的案例相关的任何内容。
我的设置: 我创建了一个带有 WordPress 主题弹出窗口的自定义 TinyMCE 按钮,允许用户从下拉列表中 select 自定义 post 类型 post(在本例中为 "Customer Review") 然后将其 ID 插入简码中。由于该主题 运行 所在的网站有超过 1,000 条评论,我认为最好 json 对下拉列表的数据进行编码,然后使用 select2 搜索有限结果列表(分页结果)并防止整个事情爆炸。除了 2 个项目外,所有这些都运行良好:
显示 json 编码数据,但是当我输入搜索词时,select2 下拉列表显示所有评论的列表,第一个 select编辑。它没有找到结果,即使搜索的文本在列表中
从上面开始,一旦我输入搜索词,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 )
哪个returns
[{"id":12286,"text":"John Doe"},{"id":12285,"text":"Jane Doe"},...]
(返回的商品超过800件,所以上面只显示了2件,但你明白了)
这是我用来让我的
$(".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
});
除了搜索和分页,我一辈子都弄不明白为什么一切正常。有什么想法吗?
您的服务器端代码中似乎没有任何用于过滤和分页结果的代码。 Select2 意识到在服务器端完成此操作效率更高,并希望开发人员在服务器端实现它。搜索词将作为 q
传递,页面将作为 page
(如果可用)传递。
如果您不想在服务器端实现搜索和分页,或者只有一个端点 returns all 结果,您仍然可以解决它.您只需要使用 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
});
});