mq翻译主题模板中的代码 WordPress 通过代码实现 Ajax 自动完成搜索

本教程适用于希望在 WordPress 中自动完成搜索的用户，我们可以完全控制返回的匹配项。

我们将自动完成功能应用到标准的 WordPress 搜索中，但代码具有高度的灵活性，因此您可以根据需要自定义查询。无论是自定义文章类型、文章元数据、分类，还是针对完全不同类型的内容（例如用户或数据库中的数据）的更具体查询。您还可以轻松地将自动完成功能应用于自定义搜索输入，而不仅限于标准的 WordPress 搜索。

我们要做什么

自动完成是一个显示在搜索字段下方的 UI 框，并在您键入时显示匹配项。点击匹配后，浏览器会将您带到网站的固定链接。这为*终用户提供了一种更快的方式来浏览内容，因为他们不需要绕过您的搜索结果页面。随着用户输入，我们将使用 AJAX 不断更新匹配。

自动完成是在 jQuery UI 自动完成的帮助下生成的，这是 WordPress 中默认包含的脚本。

设置代码

您需要在主题functions.php 文件或有效的插件PHP 文件中添加代码。本教程基于将其添加到主题中。请调整路径以适合您的项目。

第一步是创建一个 Javascript 文件，该文件将包含我们触发自动完成的代码。对于本教程，我将在主题的 assets/js/ 文件夹中创建一个空文件 autocomplete.js。文件的位置由您决定，只需记住调整以下路径即可。文件在 WordPress 中正确排队后，我们将返回文件。

介绍脚本和样式

我们需要引入自动完成Javascript文件，我们还需要确保引入jQuery和jQuery UI Autocomplete。此外，WordPress 不包含任何 jQuery UI 库的样式，因此我们还需要从 Google CDN 导入 jQuery UI 样式表。当然mq翻译主题模板中的代码，这是可选的。您可以通过其他方式添加 CSS，或者您可能想要自己设置样式。

我们将所有脚本和样式放入一个函数并挂载到 wp_enqueue_scripts：

函数.php

add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri() . '/assets/js/autocomplete.js',
['jquery', 'jquery-ui-autocomplete'], null, true);
});

ue_script() 将添加新创建的具有正确依赖项的 Javascript 文件（该数组用作第三个参数）。这确保 WordPress 将 jQuery 和 jQuery UI 自动完成脚本添加到我们的 WordPress 实例。

接下来，我们需要提供一些可以从自动完成脚本访问的变量。我们需要知道 AJAX URL，我们还想添加一个安全随机数。我们可以像这样使用 wp_localize_script() ：

函数.php

add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri() . '/assets/js/autocomplete.js',
['jquery', 'jquery-ui-autocomplete'], null, true);
wp_localize_script('autocomplete-search', 'AutocompleteSearch', [
'ajax_url' => admin_url('admin-ajax.php'),
'ajax_nonce' => wp_create_nonce('autocompleteSearchNonce')
]);
});

wp_localize_script() 函数将创建一个具有两个属性（ajax_url 和 ajax_nonce）的 AutocompleteSearch 全局 Javascript 变量。这样我们就可以在自动完成Javascript文件中获取WordPress AJAX URL的值，比如AutocompleteSearch.ajax_url。

*后，我们需要添加一些样式。前面提到过，WordPress 没有自带任何 jQuery UI 样式，所以我们需要自己添加一些样式。我选择通过 Google CDN 添加样式表。但是我们需要知道 jQuery UI 版本号才能获得它的样式表。我们可以硬编码版本号，但我不喜欢硬编码任何东西。下面mq翻译主题模板中的代码，您将找到一个利用 WordPress 中存储的 jQuery UI 版本信息的好技巧。

函数.php

add_action('wp_enqueue_scripts', function() {
…
$wp_scripts = wp_scripts(); wp_enqueue_style('jquery-ui-css', '//ajax.lug.ustc.edu.cn/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-autocomplete']->ver . '/themes/smoothness/jquery-ui.css', false, null, false );
});

我们使用 wp_enqueue_style() 注册的 CDN 路径作为第二个参数来注册和添加新的样式表。为了获得有效的 jQuery UI 版本号，我们使用此函数 wp_scripts() 提供的信息。

这就是我们需要介绍脚本的全部内容！

编写自动完成 Javascript

让我们回到我们的 autocomplete.js 文件。我们知道，在加载脚本时，jQuery 和 jQuery UI Autocomplete 已经加载，我们还可以访问具有必要信息的全局变量。让我们从设置 jQuery 文档就绪函数开始，以确保我们的代码在 DOM 就绪后运行。

自动完成.js

jQuery(function($) {
// All code in here
});

如果我们查看了 jQuery UI 自动完成文档，我们就会知道我们需要为输入字段创建一个 jQuery 选择器并在其 autocomplete() 上运行该函数。

此时，您可以调整代码以满足您的需要。本教程将自动完成功能应用于标准 WordPress 搜索字段（通常通过包含搜索模板或作为小部件将其添加到主题中）。搜索中输入的班级名称可能因学科而异。但您可能希望找到自定义输入字段或在特殊模板中进行搜索。您需要做的就是更改 jQuery 选择器以找到所需的输入。

在我的主题中，标准的 WordPress 搜索字段输入具有类 .search-field。我还添加了父表单类名以进一步缩小范围，因此我们不会冒险将自动完成功能应用于使用同一类的其他事物。

根据自动补全文档，我们可以在属性中进行AJAX调用（属性源必须返回一个要在自动补全中显示的项目数组）。我们将使用 jQuery 的 Ajax 函数来做到这一点：

自动完成.js

jQuery(function($) {
$('.search-form .search-field').autocomplete({
source: function(request, response) {
$.ajax({
dataType: 'json',
url: AutocompleteSearch.ajax_url,
data: {
term: request.term,
action: 'autocompleteSearch',
security: AutocompleteSearch.ajax_nonce,
},
success: function(data) {
response(data);
}
});
},
});
});

在第二行代码中，我们告诉 jQuery UI 应该将自动完成功能应用于哪个输入字段。更改此选择器以满足您的需要。

在*简单的形式中，“自动完成”期望源属性包含一组项目对象。在这里，我们创建了一个带有两个参数的函数；request 包含我们输入的值的信息（request.term），response 是我们需要调用和提供数据的回调函数。这是我们在 AJAXsuccess 函数中的 13 行代码。

AJAX 调用本身是非常标准的。我们将数据类型定义为 JSON——这一点很重要，否则 jQuery UI Autocomplete 将无法解析结果。当我们访问 ajax_url 全局变量 url 时，我们之前对脚本 AutocompleteSearch 进行了本地化。当数据我们传递信息对象时。action 属性是必需的，并且是下一步所必需的——在 PHP 中识别这个特定的 AJAX 请求。为安全起见，我们还将输入的术语传递给输入和随机数。

这是来源属性。我们还需要向自动完成脚本添加另一项内容。在 jQuery UI Autocomplete 中，默认情况下，选择一个项目将自动使用所选元素填充输入。从列表中选择项目时，我们希望将用户重定向到文章的 URL。因此，我们在 select 属性中添加了一个函数：

自动完成.js

…
success: function(data) {
response(data);
}
});
},
select: function(event, ui) {
window.location.href = ui.item.link;
},
});
});

在item数组中，我们会从AJAX调用中返回（我们会写在下一个内容中），每个item都是一个带有属性的对象。我们将为每个项目（ui.item）添加一个自定义属性链接，其中将包含每篇文章的永久链接。我们将此 URL 传递给 window.location.href，它将触发浏览器重定向。

这就是Java语言部分的全部内容！剩下的就是写PHP部分，通过这个操作监听AJAX请求autocompleteSearch。

将PHP中的结果返回给AJAX请求

为了编写响应特定 AJAX 请求的函数，我们使用钩子 wp_ajax_{action}（登录访问者）和 wp_ajax_nopriv_{action}（未登录访问者）。我们的 autocompleteSearch 定义了上述 AJAX 请求中的操作。

让我们在以下位置（或在 PHP 中添加代码的任何位置）设置 functions.php：

函数.php

add_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');
add_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');
function awp_autocomplete_search() {
// echo result
die();
}

使用上面的代码，我们将相同的函数挂接到两个 AJAX 钩子上。在所有与 wp_ajax AJAX 钩子挂钩的函数中，我们必须确保 die() 或 exit 始终在*后执行，以避免回显不需要的输出。我正在使用 WordPress 的 wp_die() 函数。

我们可以使用 $_REQUEST（可从 GET 和 POST 请求中获得）从 Javascript 获取传递的数据。在我们的 Javascript 代码中，我们在关键字“term”中传递了输入的术语。这意味着我们可以在 $_REQUEST['term'] 中获取它的值。然后我们可以基于此执行查询。请记住，我们只想返回与搜索词匹配的结果。

这是您可以完全更改和调整代码以满足您的需求的另一点。本教程将对文章和页面执行标准查询，但您可以调整查询或对不同数据执行完全不同的查询。也许您更喜欢或需要执行手动 SQL 查询（这肯定会提高内存效率）。这里的关键部分是我们*后回显的数组，它是由 Javascript 的自动补全代码解析的。

函数.php

add_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');
add_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');
function awp_autocomplete_search() {
check_ajax_referer('autocompleteSearchNonce', 'security');
$search_term = $_REQUEST['term'];
if (!isset($_REQUEST['term'])) {
echo json_encode([]);
}
$suggestions = [];
$query = new WP_Query([
's' => $search_term,
'posts_per_page' => -1,
]);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$suggestions[] = [
'id' => get_the_ID(),
'label' => get_the_title(),
'link' => get_the_permalink()
];
}
wp_reset_postdata();
}
echo json_encode($suggestions);
wp_die();
}

首先，我们检查随机数是否有效以在我们的 AJAX 调用中建立一些安全性。我们可以通过调用函数 check_ajax_referer() 来做到这一点。我还添加了代码以确保如果返回的搜索词为空，我们不会执行繁重的请求。然后，我们应该返回一个空的 json 编码数组。

上面的示例代码 WP_Query 搜索输入的单词。我们需要将 posts_per_page 设置为 -1 以确保我们返回所有匹配项。检查文档以查看 WP_Query 是否需要进一步调整查询。

然后，我们遍历结果（第 17 行）并用匹配项填充数组（第 19-23 行）。jQuery UI 自动补全功能至少需要有一定的属性，label 来指明自动补全功能框中应该显示的内容。我们还在关键的“链接”中传递了一个永久链接，这是我们在 Javascript 代码中重定向用户的方式。

*后，在第 27 行，我们使用 json_encode() 将生成的数组输出为 JSON。

有了这个 PHP 部分，我们的自动完成功能就可以工作了！刷新您的网站并尝试一下！

可选改进

一个常见的问题是匹配太多，自动完成框太大。有两种解决方案。

一种解决方案是将属性 minLength 添加到 autocomplete()Javascript 函数。此属性仅在输入一定数量的字符后才会触发自动完成框。例如，我们需要至少 3 个字符才能触发自动补全功能：

自动完成.js

…
select: function(event, ui) {
window.location.href = ui.item.link;
},
minLength: 3,
});
});

jQuery UI Autocomplete 在这里提出了另一种解决方案。它显示了在自动完成框中添加一些 CSS 以添加固定高度和内部滚动条的示例。

总结和完整代码

我们已经成功地在WordPress的搜索功能中加入了自动补全功能，我们可以完全控制返回的匹配项。它为访问者提供了一种更快的方式来浏览您的内容，因为单击匹配项会将您直接重定向到文章，而不是先绕过搜索结果页面。在所有 WordPress 网站中实现自动完成可能并不总是有意义，但它对于搜索特定内容或特殊模板非常有用！

这是完整的*终代码：

函数.php

add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri() . '/assets/js/autocomplete.js',
['jquery', 'jquery-ui-autocomplete'], null, true);
wp_localize_script('autocomplete-search', 'AutocompleteSearch', [
'ajax_url' => admin_url('admin-ajax.php'),
'ajax_nonce' => wp_create_nonce('autocompleteSearchNonce')
]);
$wp_scripts = wp_scripts();
wp_enqueue_style('jquery-ui-css',
'//ajax.lug.ustc.edu.cn/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-autocomplete']->ver . '/themes/smoothness/jquery-ui.css',
false, null, false);
});
add_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');
add_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');
function awp_autocomplete_search() {
check_ajax_referer('autocompleteSearchNonce', 'security');
$search_term = $_REQUEST['term'];
if (!isset($_REQUEST['term'])) {
echo json_encode([]);
}
$suggestions = [];
$query = new WP_Query([
's' => $search_term,
'posts_per_page' => -1,
]);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$suggestions[] = [
'id' => get_the_ID(),
'label' => get_the_title(),
'link' => get_the_permalink()
];
}
wp_reset_postdata();
}
echo json_encode($suggestions);
wp_die();
}

自动完成.js

jQuery(function($) {
$('.search-form .search-field').autocomplete({
source: function(request, response) {
$.ajax({
dataType: 'json',
url: AutocompleteSearch.ajax_url,
data: {
term: request.term,
action: 'autocompleteSearch',
security: AutocompleteSearch.ajax_nonce,
},
success: function(data) {
response(data);
}
});
},
select: function(event, ui) {
window.location.href = ui.item.link;
},
});
});

注意：本教程来自 WordPress 大学并由其编译。

声明：本站提供的源代码、模板、插件等资源除资源本身问题外不包含免费技术服务。如需技术支持，需支付100+技术服务费。详情以客服说明为准，敬请谅解！

免责声明：本站所有文章，无特殊说明或注释，均为本站原创刊物。任何个人或组织未经本站同意，不得复制、盗用、收集、发布本站内容至任何网站、图书等媒体平台。如果本站内容侵犯了原作者的合法权益，您可以联系我们进行处理。

VV君永久会员