javascript - 如何使用搜索框过滤来自 WordPress API 的帖子?
问题描述
我已经能够在 php 网页(WordPress 之外)上获得帖子列表。如何使用搜索框按博客标题(搜索词)过滤现有结果。
这是我的搜索框
<div class="sbox">
<h4>Search blog by title</h4>
<div class="form-group ">
<input type="text" name="search_box" id="search_box" class="form-control" placeholder="Search by title, author or category" >
</div>
</div>
这是我的ajax尝试
$('#search_box').keyup(function(){
var text = $('#search_box').val();
var api_url_search = `http://example.com/wordpress/wp-json/wp/v2/posts?filter[s]=${text}`;
$.ajax({
url:api_url_search,
dataType: 'json',
success: function(response){
var len = response.length;
for(var i=0; i<len; i++){
var title = response[i].title.rendered;
var search_str =
'<li>'+
'<p>' + title + '</p>' +
'</li>'
;
$('#results').append(search_str);
}
}
});
});
它似乎在遍历每个输入的字母并返回每个字母的所有帖子。
解决方案
我找到了答案。WordPress api 不允许您按标题过滤,但您可以按 slug 过滤。所以用户必须用连字符输入标题(例如我的标题)
//setup before functions
var typingTimer; //timer identifier
var doneTypingInterval = 5000; //time in ms (5 seconds)
//on keyup, start the countdown
$('#search_box').keyup(function(){
clearTimeout(typingTimer);
if ($('#search_box').val()) {
var text = $('#search_box').val();
typingTimer = setTimeout(doneTyping(text), doneTypingInterval)
}
});
//user is "finished typing," do something
function doneTyping (text) {
// var text = text;
var api_url_search = `http://examle.com/wordpress/wp-json/wp/v2/posts?slug=${text}`;
$.ajax({
url:api_url_search,
dataType: 'json',
success: function(response){
var len = response.length;
for(var i=0; i<len; i++){
var id = response[i].id;
var date = response[i].date_gmt;
var slug = response[i].slug;
var excerpt = response[i].excerpt.rendered;
var categories = response[i].categories;
var search_str =
'<td>'+
'<div class="card" style="width: 300px;">' +
'<div class="card-divider">' + (i+1) + ' ' + slug + '</div>' +
' <div class="card-section">' +
'<p>' + excerpt + '</p>' +
'<h4>' + date + '</h4>' +
'<h4>' + 'Category:' + categories + '</h4>' +
'<a href="http://example.com/api-posts.php?">'+
'<input type="button" value="read more">' + '</input>' +
' </a>' +
' </div>' +
'</div>'+
'</td>'
;
$('#results').empty().append(search_str); // empty previous results and append new results
}
}
});
};
推荐阅读
- spring-data-jpa - 通缉但未调用:但与此模拟的交互为零
- java - 如何使用selenium webdriver java单击按钮,其xpath不是恒定的
- python - 初始化多个类 Python 中使用的公共变量
- r - R Leaflet 嵌入 Shiny Dashboard 时不显示图例
- powershell - 如何通过 Powershell 填充 IIS 应用程序池中的关闭可执行文件字段
- c# - dotnet core 数据库首先使用 NetTopologySuite
- java - 在每次更新时填充 Java 对象列表以索引零
- c# - MSSMS 和 Windows 客户端的查询时间大不同
- python - MongoDB 查询 KeyError
- javascript - Angular:基于表达式绑定事件