如何从头开始在 WordPress 中创建自定义实时搜索
how to create a custom live search in WordPress from scratch
我是 WordPress 的新手，我尝试使用 ajax 创建实时搜索，我希望当用户按下按钮时出现一个框，搜索结果显示在该框中。
为此，我在我的主题文件夹中创建了一个名为 livesearch 的文件夹，在该文件夹中我放置了一个名为 search-live.php 的文件，该文件中的代码如下所示：
<?php
//echo $_GET['search'];
$test = GetMySearchResult($_GET['search']);
print_r($test);
在我的 functions.php 文件中，我创建了一个名为 GetMySearchResult 的函数，如下所示：
function GetMySearchResult($search){
global $wpdb;
$myrows = $wpdb->get_results( "SELECT * FROM wp_posts post_type = post ID LIKE %" . $search . "%" );
return $myrows;
}
add_action('init', 'GetMySearchResult');
然后我使用 ajax 将数据发送到 search-live.php，代码如下：
<script>
var GetSearch = document.getElementById('search');
GetSearch.addEventListener("keyup", function(){
//InfoData = {slug:GetSearch.value}
$.ajax({
type: "GET",
url: '<?php echo get_site_url(); ?>/wp-content/themes/webranko/livesearch/search-live.php?search=' + GetSearch.value ,
data: '',
datatype: "html",
success: function(result) {
console.log(result);
}
});
});
</script>
我已经 $_GET['search']; 并且一切正常，我可以在我的控制台中看到结果但是当我调用 GetMySearchResult($_GET['search']) 它给了我这样一个致命错误：
致命错误：未捕获错误：调用 C:\xampp\htdocs\web\wp-content\themes\webranko\livesearch\search-live.php:3 中未定义的函数 GetMySearchResult()
堆栈跟踪：
#0 {主要}
扔在 C:\xampp\htdocs\web\wp-content\themes\webranko\livesearch\search-live.php 线上 3
我错过了什么或做错了什么？
我相信您无法获得一种绝对的解决方案，因为您可以通过多种方式应用实时搜索。但所有这些都应该经过 JavaScript。您可以在下面找到我应用实时搜索的代码片段。我知道它需要解释很多，但我希望你能阅读它并理解代码的流程，因此我可以提供一点帮助。
以下代码的应用你可以在this网站的搜索按钮中找到它，该网站仍在开发过程中所以不要担心设计，只需按搜索按钮即可。希望我能帮到你！
/*
=================================================================================
LIVE SEARCH
=================================================================================
*/
// VARs =======================================================================
var searchArea = $('#modal-search-input');
var spinner = `
<div class="search_ajax_loader">
<svg viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg">
<rect y="10" width="15" height="120" rx="6">
<animate attributeName="height"
begin="0.5s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0.5s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
<rect x="30" y="10" width="15" height="120" rx="6">
<animate attributeName="height"
begin="0.25s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0.25s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
<rect x="60" width="15" height="140" rx="6">
<animate attributeName="height"
begin="0s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
<rect x="90" y="10" width="15" height="120" rx="6">
<animate attributeName="height"
begin="0.25s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0.25s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
<rect x="120" y="10" width="15" height="120" rx="6">
<animate attributeName="height"
begin="0.5s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0.5s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
</svg>
</div>
`;
var isSpinnerVisible = false;
var previousValue, typingTimer;
// Excute functions ===============================================================
addSearchHTML();
SearchBtnStyle();
votEvents();
// define functions ================================================================
function addSearchHTML () {
$('.mainmenu').append(`
<div class="widget widget_search">
<div id="vot_search_button"></div>
</div>
`);
$('#search_modal').append(`
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="rt-icon2-cross2"></i>
</span>
</button>
<div class="widget widget_search">
<div class="searchform search-form form-inline" >
<div class="form-group">
<input type="text" value="" name="search" class="form-control" placeholder=" ما الذي تريد أ ن تبحث عنه؟" id="modal-search-input">
</div>
<div id="inner_search_btn"></div>
</div>
</div>
<div id="result_area" class="row">
<fieldset id="result_area_sermons" class="search_column col-md-4 col-sm-12">
<legend class="search_legend">
عظات
</legend>
<ul class="search_column_result">
</ul>
</fieldset>
<fieldset id="result_area_tvshows" class="search_column col-md-4 col-sm-12">
<legend class="search_legend">
برامج تلفزيونية
</legend>
<ul class="search_column_result">
</ul>
</fieldset>
<fieldset id="result_area_articles" class="search_column col-md-4 col-sm-12">
<legend class="search_legend">
مقالات
</legend>
<ul class="search_column_result">
</ul>
</fieldset>
</div>
`);
if ($('body').hasClass('home')) {
$('.widget_search').addClass('widget_search_homepage');
}
}
function SearchBtnStyle () {
var SearchBtnPadding = $('.mainmenu .menu-item > a').css('padding');
var SearchBtnMargin = $('.mainmenu .menu-item > a').css('margin');
$('#vot_search_button').css('padding', SearchBtnPadding);
$('#vot_search_button').css('margin', SearchBtnMargin);
}
function votEvents (){
$('#vot_search_button').on('click', openOverlay);
$('#modal-search-input').on("keyup", typingLogic);
}
// event handlers functions ==========================================================
function openOverlay (){
$('#search_modal').modal('show').find('input').first().focus();
}
function typingLogic () {
var searchArea = $('#modal-search-input'),
resultsDivSermons = $('#result_area #result_area_sermons .search_column_result');
resultsDivTVshows = $('#result_area #result_area_tvshows .search_column_result');
resultsDivArticles = $('#result_area #result_area_articles .search_column_result');
if (searchArea.val() != previousValue) {
clearTimeout(typingTimer);
if (searchArea.val()) {
if (!isSpinnerVisible) {
resultsDivSermons.html(spinner);
resultsDivTVshows.html(spinner);
resultsDivArticles.html(spinner);
isSpinnerVisible = true;
}
typingTimer = setTimeout(getResults, 2000);
} else {
resultsDivSermons.html('');
resultsDivTVshows.html('');
resultsDivArticles.html('');
isSpinnerVisible = false;
}
}
previousValue = searchArea.val();
}
function getResults () {
var searchArea = $('#modal-search-input');
//sermons
var sermons_url = vot_vars.root_directory + '/wp-json/wp/v2/vot-sermons?search=' + searchArea.val();
$.getJSON(sermons_url, sermons => {
$('#result_area #result_area_sermons .search_column_result').prepend(`
${sermons.length ? '' : '<li>لم نستطيع العثور على عظة تطابق بحثك</li>'}
${sermons.map(item => `<li><a href="${item.link}">${votChangeNumbersToArabic(item.title.rendered)}</a></li>`).join('')}
${sermons.length ? '' : ''}
`);
isSpinnerVisible = false;
$('#result_area #result_area_sermons .search_ajax_loader').hide();
});
//tvshows
var tvshows_url = vot_vars.root_directory + '/wp-json/wp/v2/vot-tvshows?search=' + searchArea.val();
$.getJSON(tvshows_url, sermons => {
$('#result_area #result_area_tvshows .search_column_result').prepend(`
${sermons.length ? '' : '<li>لم نستطيع العثور على برنامج تلفزيوني يطابق بحثك</li>'}
${sermons.map(item => `<li><a href="${item.link}">${votChangeNumbersToArabic(item.title.rendered)}</a></li>`).join('')}
${sermons.length ? '' : ''}
`);
isSpinnerVisible = false;
$('#result_area #result_area_tvshows .search_ajax_loader').hide();
});
//articles
var articles_url = vot_vars.root_directory + '/wp-json/wp/v2/vot-articles?search=' + searchArea.val();
$.getJSON(articles_url, sermons => {
$('#result_area #result_area_articles .search_column_result').prepend(`
${sermons.length ? '' : '<li>لم نستطيع العثور على مقالة تطابق بحثك</li>'}
${sermons.map(item => `<li><a href="${item.link}">${votChangeNumbersToArabic(item.title.rendered)}</a></li>`).join('')}
${sermons.length ? '' : ''}
`);
isSpinnerVisible = false;
$('#result_area #result_area_articles .search_ajax_loader').hide();
});
}
要创建实时搜索，只需向 wp-json 发送 GET 请求即可，无需进行新查询
只需在 ajax 请求中使用此 URL：
<?php echo get_site_url(); ?>wp-json/wp/v2/posts?search=' + GetSearch.value
所以ajax代码应该是这样的：
<script>
var GetSearch = document.getElementById('search');
GetSearch.addEventListener("keyup", function(){
//InfoData = {slug:GetSearch.value}
$.ajax({
type: "GET",
url: '<?php echo get_site_url(); ?>wp-json/wp/v2/posts?search=' + GetSearch.value ,
data: '',
datatype: "html",
success: function(result) {
console.log(result);
}
});
});
</script>
和 HTML 搜索输入应该是这样的：
<input type="search" id="search" name="search" placeholder="search" autocomplete="off"/>
你必须关闭输入的自动完成
我是 WordPress 的新手，我尝试使用 ajax 创建实时搜索，我希望当用户按下按钮时出现一个框，搜索结果显示在该框中。
为此，我在我的主题文件夹中创建了一个名为 livesearch 的文件夹，在该文件夹中我放置了一个名为 search-live.php 的文件，该文件中的代码如下所示：
<?php
//echo $_GET['search'];
$test = GetMySearchResult($_GET['search']);
print_r($test);
在我的 functions.php 文件中，我创建了一个名为 GetMySearchResult 的函数，如下所示：
function GetMySearchResult($search){
global $wpdb;
$myrows = $wpdb->get_results( "SELECT * FROM wp_posts post_type = post ID LIKE %" . $search . "%" );
return $myrows;
}
add_action('init', 'GetMySearchResult');
然后我使用 ajax 将数据发送到 search-live.php，代码如下：
<script>
var GetSearch = document.getElementById('search');
GetSearch.addEventListener("keyup", function(){
//InfoData = {slug:GetSearch.value}
$.ajax({
type: "GET",
url: '<?php echo get_site_url(); ?>/wp-content/themes/webranko/livesearch/search-live.php?search=' + GetSearch.value ,
data: '',
datatype: "html",
success: function(result) {
console.log(result);
}
});
});
</script>
我已经 $_GET['search']; 并且一切正常，我可以在我的控制台中看到结果但是当我调用 GetMySearchResult($_GET['search']) 它给了我这样一个致命错误：
致命错误：未捕获错误：调用 C:\xampp\htdocs\web\wp-content\themes\webranko\livesearch\search-live.php:3 中未定义的函数 GetMySearchResult() 堆栈跟踪： #0 {主要} 扔在 C:\xampp\htdocs\web\wp-content\themes\webranko\livesearch\search-live.php 线上 3
我错过了什么或做错了什么？
我相信您无法获得一种绝对的解决方案，因为您可以通过多种方式应用实时搜索。但所有这些都应该经过 JavaScript。您可以在下面找到我应用实时搜索的代码片段。我知道它需要解释很多，但我希望你能阅读它并理解代码的流程，因此我可以提供一点帮助。
以下代码的应用你可以在this网站的搜索按钮中找到它，该网站仍在开发过程中所以不要担心设计，只需按搜索按钮即可。希望我能帮到你！
/*
=================================================================================
LIVE SEARCH
=================================================================================
*/
// VARs =======================================================================
var searchArea = $('#modal-search-input');
var spinner = `
<div class="search_ajax_loader">
<svg viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg">
<rect y="10" width="15" height="120" rx="6">
<animate attributeName="height"
begin="0.5s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0.5s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
<rect x="30" y="10" width="15" height="120" rx="6">
<animate attributeName="height"
begin="0.25s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0.25s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
<rect x="60" width="15" height="140" rx="6">
<animate attributeName="height"
begin="0s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
<rect x="90" y="10" width="15" height="120" rx="6">
<animate attributeName="height"
begin="0.25s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0.25s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
<rect x="120" y="10" width="15" height="120" rx="6">
<animate attributeName="height"
begin="0.5s" dur="1s"
values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="y"
begin="0.5s" dur="1s"
values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
repeatCount="indefinite" />
</rect>
</svg>
</div>
`;
var isSpinnerVisible = false;
var previousValue, typingTimer;
// Excute functions ===============================================================
addSearchHTML();
SearchBtnStyle();
votEvents();
// define functions ================================================================
function addSearchHTML () {
$('.mainmenu').append(`
<div class="widget widget_search">
<div id="vot_search_button"></div>
</div>
`);
$('#search_modal').append(`
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="rt-icon2-cross2"></i>
</span>
</button>
<div class="widget widget_search">
<div class="searchform search-form form-inline" >
<div class="form-group">
<input type="text" value="" name="search" class="form-control" placeholder=" ما الذي تريد أ ن تبحث عنه؟" id="modal-search-input">
</div>
<div id="inner_search_btn"></div>
</div>
</div>
<div id="result_area" class="row">
<fieldset id="result_area_sermons" class="search_column col-md-4 col-sm-12">
<legend class="search_legend">
عظات
</legend>
<ul class="search_column_result">
</ul>
</fieldset>
<fieldset id="result_area_tvshows" class="search_column col-md-4 col-sm-12">
<legend class="search_legend">
برامج تلفزيونية
</legend>
<ul class="search_column_result">
</ul>
</fieldset>
<fieldset id="result_area_articles" class="search_column col-md-4 col-sm-12">
<legend class="search_legend">
مقالات
</legend>
<ul class="search_column_result">
</ul>
</fieldset>
</div>
`);
if ($('body').hasClass('home')) {
$('.widget_search').addClass('widget_search_homepage');
}
}
function SearchBtnStyle () {
var SearchBtnPadding = $('.mainmenu .menu-item > a').css('padding');
var SearchBtnMargin = $('.mainmenu .menu-item > a').css('margin');
$('#vot_search_button').css('padding', SearchBtnPadding);
$('#vot_search_button').css('margin', SearchBtnMargin);
}
function votEvents (){
$('#vot_search_button').on('click', openOverlay);
$('#modal-search-input').on("keyup", typingLogic);
}
// event handlers functions ==========================================================
function openOverlay (){
$('#search_modal').modal('show').find('input').first().focus();
}
function typingLogic () {
var searchArea = $('#modal-search-input'),
resultsDivSermons = $('#result_area #result_area_sermons .search_column_result');
resultsDivTVshows = $('#result_area #result_area_tvshows .search_column_result');
resultsDivArticles = $('#result_area #result_area_articles .search_column_result');
if (searchArea.val() != previousValue) {
clearTimeout(typingTimer);
if (searchArea.val()) {
if (!isSpinnerVisible) {
resultsDivSermons.html(spinner);
resultsDivTVshows.html(spinner);
resultsDivArticles.html(spinner);
isSpinnerVisible = true;
}
typingTimer = setTimeout(getResults, 2000);
} else {
resultsDivSermons.html('');
resultsDivTVshows.html('');
resultsDivArticles.html('');
isSpinnerVisible = false;
}
}
previousValue = searchArea.val();
}
function getResults () {
var searchArea = $('#modal-search-input');
//sermons
var sermons_url = vot_vars.root_directory + '/wp-json/wp/v2/vot-sermons?search=' + searchArea.val();
$.getJSON(sermons_url, sermons => {
$('#result_area #result_area_sermons .search_column_result').prepend(`
${sermons.length ? '' : '<li>لم نستطيع العثور على عظة تطابق بحثك</li>'}
${sermons.map(item => `<li><a href="${item.link}">${votChangeNumbersToArabic(item.title.rendered)}</a></li>`).join('')}
${sermons.length ? '' : ''}
`);
isSpinnerVisible = false;
$('#result_area #result_area_sermons .search_ajax_loader').hide();
});
//tvshows
var tvshows_url = vot_vars.root_directory + '/wp-json/wp/v2/vot-tvshows?search=' + searchArea.val();
$.getJSON(tvshows_url, sermons => {
$('#result_area #result_area_tvshows .search_column_result').prepend(`
${sermons.length ? '' : '<li>لم نستطيع العثور على برنامج تلفزيوني يطابق بحثك</li>'}
${sermons.map(item => `<li><a href="${item.link}">${votChangeNumbersToArabic(item.title.rendered)}</a></li>`).join('')}
${sermons.length ? '' : ''}
`);
isSpinnerVisible = false;
$('#result_area #result_area_tvshows .search_ajax_loader').hide();
});
//articles
var articles_url = vot_vars.root_directory + '/wp-json/wp/v2/vot-articles?search=' + searchArea.val();
$.getJSON(articles_url, sermons => {
$('#result_area #result_area_articles .search_column_result').prepend(`
${sermons.length ? '' : '<li>لم نستطيع العثور على مقالة تطابق بحثك</li>'}
${sermons.map(item => `<li><a href="${item.link}">${votChangeNumbersToArabic(item.title.rendered)}</a></li>`).join('')}
${sermons.length ? '' : ''}
`);
isSpinnerVisible = false;
$('#result_area #result_area_articles .search_ajax_loader').hide();
});
}
要创建实时搜索，只需向 wp-json 发送 GET 请求即可，无需进行新查询
只需在 ajax 请求中使用此 URL：
<?php echo get_site_url(); ?>wp-json/wp/v2/posts?search=' + GetSearch.value
所以ajax代码应该是这样的：
<script>
var GetSearch = document.getElementById('search');
GetSearch.addEventListener("keyup", function(){
//InfoData = {slug:GetSearch.value}
$.ajax({
type: "GET",
url: '<?php echo get_site_url(); ?>wp-json/wp/v2/posts?search=' + GetSearch.value ,
data: '',
datatype: "html",
success: function(result) {
console.log(result);
}
});
});
</script>
和 HTML 搜索输入应该是这样的：
<input type="search" id="search" name="search" placeholder="search" autocomplete="off"/>
你必须关闭输入的自动完成