本教程適用于希望在 WordPress 中自動完成搜索的用戶，我們可以完全控制返回的匹配項。

我們將自動完成功能應用到標準的 WordPress 搜索中，但代碼具有高度的靈活性，因此您可以根據(jù)需要自定義查詢。無論是自定義文章類型、文章元數(shù)據(jù)、分類，還是針對完全不同類型的內(nèi)容（例如用戶或數(shù)據(jù)庫中的數(shù)據(jù)）的更具體查詢。您還可以輕松地將自動完成功能應用于自定義搜索輸入，而不僅限于標準的 WordPress 搜索。

我們要做什么

自動完成是一個顯示在搜索字段下方的 UI 框，并在您鍵入時顯示匹配項。點擊匹配后，瀏覽器會將您帶到網(wǎng)站的固定鏈接。這為*終用戶提供了一種更快的方式來瀏覽內(nèi)容，因為他們不需要繞過您的搜索結果頁面。隨著用戶輸入，我們將使用 AJAX 不斷更新匹配。

自動完成是在 jQuery UI 自動完成的幫助下生成的，這是 WordPress 中默認包含的腳本。

設置代碼

您需要在主題functions.php 文件或有效的插件PHP 文件中添加代碼。本教程基于將其添加到主題中。請調(diào)整路徑以適合您的項目。

第一步是創(chuàng)建一個 Javascript 文件，該文件將包含我們觸發(fā)自動完成的代碼。對于本教程，我將在主題的 assets/js/ 文件夾中創(chuàng)建一個空文件 autocomplete.js。文件的位置由您決定，只需記住調(diào)整以下路徑即可。文件在 WordPress 中正確排隊后，我們將返回文件。

介紹腳本和樣式

我們需要引入自動完成Javascript文件，我們還需要確保引入jQuery和jQuery UI Autocomplete。此外，WordPress 不包含任何 jQuery UI 庫的樣式，因此我們還需要從 Google CDN 導入 jQuery UI 樣式表。當然mq翻譯主題模板中的代碼，這是可選的。您可以通過其他方式添加 CSS，或者您可能想要自己設置樣式。

我們將所有腳本和樣式放入一個函數(shù)并掛載到 wp_enqueue_scripts：

函數(shù).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() 將添加新創(chuàng)建的具有正確依賴項的 Javascript 文件（該數(shù)組用作第三個參數(shù)）。這確保 WordPress 將 jQuery 和 jQuery UI 自動完成腳本添加到我們的 WordPress 實例。

接下來，我們需要提供一些可以從自動完成腳本訪問的變量。我們需要知道 AJAX URL，我們還想添加一個安全隨機數(shù)。我們可以像這樣使用 wp_localize_script() ：

函數(shù).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() 函數(shù)將創(chuàng)建一個具有兩個屬性（ajax_url 和 ajax_nonce）的 AutocompleteSearch 全局 Javascript 變量。這樣我們就可以在自動完成Javascript文件中獲取WordPress AJAX URL的值，比如AutocompleteSearch.ajax_url。

*后，我們需要添加一些樣式。前面提到過，WordPress 沒有自帶任何 jQuery UI 樣式，所以我們需要自己添加一些樣式。我選擇通過 Google CDN 添加樣式表。但是我們需要知道 jQuery UI 版本號才能獲得它的樣式表。我們可以硬編碼版本號，但我不喜歡硬編碼任何東西。下面mq翻譯主題模板中的代碼，您將找到一個利用 WordPress 中存儲的 jQuery UI 版本信息的好技巧。

函數(shù).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 路徑作為第二個參數(shù)來注冊和添加新的樣式表。為了獲得有效的 jQuery UI 版本號，我們使用此函數(shù) wp_scripts() 提供的信息。

這就是我們需要介紹腳本的全部內(nèi)容！

編寫自動完成 Javascript

讓我們回到我們的 autocomplete.js 文件。我們知道，在加載腳本時，jQuery 和 jQuery UI Autocomplete 已經(jīng)加載，我們還可以訪問具有必要信息的全局變量。讓我們從設置 jQuery 文檔就緒函數(shù)開始，以確保我們的代碼在 DOM 就緒后運行。

自動完成.js

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

如果我們查看了 jQuery UI 自動完成文檔，我們就會知道我們需要為輸入字段創(chuàng)建一個 jQuery 選擇器并在其 autocomplete() 上運行該函數(shù)。

此時，您可以調(diào)整代碼以滿足您的需要。本教程將自動完成功能應用于標準 WordPress 搜索字段（通常通過包含搜索模板或作為小部件將其添加到主題中）。搜索中輸入的班級名稱可能因?qū)W科而異。但您可能希望找到自定義輸入字段或在特殊模板中進行搜索。您需要做的就是更改 jQuery 選擇器以找到所需的輸入。

在我的主題中，標準的 WordPress 搜索字段輸入具有類 .search-field。我還添加了父表單類名以進一步縮小范圍，因此我們不會冒險將自動完成功能應用于使用同一類的其他事物。

根據(jù)自動補全文檔，我們可以在屬性中進行AJAX調(diào)用（屬性源必須返回一個要在自動補全中顯示的項目數(shù)組）。我們將使用 jQuery 的 Ajax 函數(shù)來做到這一點：

自動完成.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 應該將自動完成功能應用于哪個輸入字段。更改此選擇器以滿足您的需要。

在*簡單的形式中，“自動完成”期望源屬性包含一組項目對象。在這里，我們創(chuàng)建了一個帶有兩個參數(shù)的函數(shù)；request 包含我們輸入的值的信息（request.term），response 是我們需要調(diào)用和提供數(shù)據(jù)的回調(diào)函數(shù)。這是我們在 AJAXsuccess 函數(shù)中的 13 行代碼。

AJAX 調(diào)用本身是非常標準的。我們將數(shù)據(jù)類型定義為 JSON——這一點很重要，否則 jQuery UI Autocomplete 將無法解析結果。當我們訪問 ajax_url 全局變量 url 時，我們之前對腳本 AutocompleteSearch 進行了本地化。當數(shù)據(jù)我們傳遞信息對象時。action 屬性是必需的，并且是下一步所必需的——在 PHP 中識別這個特定的 AJAX 請求。為安全起見，我們還將輸入的術語傳遞給輸入和隨機數(shù)。

這是來源屬性。我們還需要向自動完成腳本添加另一項內(nèi)容。在 jQuery UI Autocomplete 中，默認情況下，選擇一個項目將自動使用所選元素填充輸入。從列表中選擇項目時，我們希望將用戶重定向到文章的 URL。因此，我們在 select 屬性中添加了一個函數(shù)：

自動完成.js

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

在item數(shù)組中，我們會從AJAX調(diào)用中返回（我們會寫在下一個內(nèi)容中），每個item都是一個帶有屬性的對象。我們將為每個項目（ui.item）添加一個自定義屬性鏈接，其中將包含每篇文章的永久鏈接。我們將此 URL 傳遞給 window.location.href，它將觸發(fā)瀏覽器重定向。

這就是Java語言部分的全部內(nèi)容！剩下的就是寫PHP部分，通過這個操作監(jiān)聽AJAX請求autocompleteSearch。

將PHP中的結果返回給AJAX請求

為了編寫響應特定 AJAX 請求的函數(shù)，我們使用鉤子 wp_ajax_{action}（登錄訪問者）和 wp_ajax_nopriv_{action}（未登錄訪問者）。我們的 autocompleteSearch 定義了上述 AJAX 請求中的操作。

讓我們在以下位置（或在 PHP 中添加代碼的任何位置）設置 functions.php：

函數(shù).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();
}

使用上面的代碼，我們將相同的函數(shù)掛接到兩個 AJAX 鉤子上。在所有與 wp_ajax AJAX 鉤子掛鉤的函數(shù)中，我們必須確保 die() 或 exit 始終在*后執(zhí)行，以避免回顯不需要的輸出。我正在使用 WordPress 的 wp_die() 函數(shù)。

我們可以使用 $_REQUEST（可從 GET 和 POST 請求中獲得）從 Javascript 獲取傳遞的數(shù)據(jù)。在我們的 Javascript 代碼中，我們在關鍵字“term”中傳遞了輸入的術語。這意味著我們可以在 $_REQUEST['term'] 中獲取它的值。然后我們可以基于此執(zhí)行查詢。請記住，我們只想返回與搜索詞匹配的結果。

這是您可以完全更改和調(diào)整代碼以滿足您的需求的另一點。本教程將對文章和頁面執(zhí)行標準查詢，但您可以調(diào)整查詢或?qū)Σ煌瑪?shù)據(jù)執(zhí)行完全不同的查詢。也許您更喜歡或需要執(zhí)行手動 SQL 查詢（這肯定會提高內(nèi)存效率）。這里的關鍵部分是我們*后回顯的數(shù)組，它是由 Javascript 的自動補全代碼解析的。

函數(shù).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();
}

首先，我們檢查隨機數(shù)是否有效以在我們的 AJAX 調(diào)用中建立一些安全性。我們可以通過調(diào)用函數(shù) check_ajax_referer() 來做到這一點。我還添加了代碼以確保如果返回的搜索詞為空，我們不會執(zhí)行繁重的請求。然后，我們應該返回一個空的 json 編碼數(shù)組。

上面的示例代碼 WP_Query 搜索輸入的單詞。我們需要將 posts_per_page 設置為 -1 以確保我們返回所有匹配項。檢查文檔以查看 WP_Query 是否需要進一步調(diào)整查詢。

然后，我們遍歷結果（第 17 行）并用匹配項填充數(shù)組（第 19-23 行）。jQuery UI 自動補全功能至少需要有一定的屬性，label 來指明自動補全功能框中應該顯示的內(nèi)容。我們還在關鍵的“鏈接”中傳遞了一個永久鏈接，這是我們在 Javascript 代碼中重定向用戶的方式。

*后，在第 27 行，我們使用 json_encode() 將生成的數(shù)組輸出為 JSON。

有了這個 PHP 部分，我們的自動完成功能就可以工作了！刷新您的網(wǎng)站并嘗試一下！

可選改進

一個常見的問題是匹配太多，自動完成框太大。有兩種解決方案。

一種解決方案是將屬性 minLength 添加到 autocomplete()Javascript 函數(shù)。此屬性僅在輸入一定數(shù)量的字符后才會觸發(fā)自動完成框。例如，我們需要至少 3 個字符才能觸發(fā)自動補全功能：

自動完成.js

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

jQuery UI Autocomplete 在這里提出了另一種解決方案。它顯示了在自動完成框中添加一些 CSS 以添加固定高度和內(nèi)部滾動條的示例。

總結和完整代碼

我們已經(jīng)成功地在WordPress的搜索功能中加入了自動補全功能，我們可以完全控制返回的匹配項。它為訪問者提供了一種更快的方式來瀏覽您的內(nèi)容，因為單擊匹配項會將您直接重定向到文章，而不是先繞過搜索結果頁面。在所有 WordPress 網(wǎng)站中實現(xiàn)自動完成可能并不總是有意義，但它對于搜索特定內(nèi)容或特殊模板非常有用！

這是完整的*終代碼：

函數(shù).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+技術服務費。詳情以客服說明為準，敬請諒解！

免責聲明：本站所有文章，無特殊說明或注釋，均為本站原創(chuàng)刊物。任何個人或組織未經(jīng)本站同意，不得復制、盜用、收集、發(fā)布本站內(nèi)容至任何網(wǎng)站、圖書等媒體平臺。如果本站內(nèi)容侵犯了原作者的合法權益，您可以聯(lián)系我們進行處理。

VV君永久會員