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

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

我們要做什么

自動(dòng)完成是一個(gè)顯示在搜索字段下方的 UI 框，并在您鍵入時(shí)顯示匹配項(xiàng)。點(diǎn)擊匹配后，瀏覽器會(huì)將您帶到網(wǎng)站的固定鏈接。這為*終用戶提供了一種更快的方式來瀏覽內(nèi)容，因?yàn)樗麄儾恍枰@過您的搜索結(jié)果頁面。隨著用戶輸入，我們將使用 AJAX 不斷更新匹配。

自動(dòng)完成是在 jQuery UI 自動(dòng)完成的幫助下生成的，這是 WordPress 中默認(rèn)包含的腳本。

設(shè)置代碼

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

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

介紹腳本和樣式

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

我們將所有腳本和樣式放入一個(gè)函數(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)建的具有正確依賴項(xiàng)的 Javascript 文件（該數(shù)組用作第三個(gè)參數(shù)）。這確保 WordPress 將 jQuery 和 jQuery UI 自動(dòng)完成腳本添加到我們的 WordPress 實(shí)例。

接下來，我們需要提供一些可以從自動(dòng)完成腳本訪問的變量。我們需要知道 AJAX URL，我們還想添加一個(gè)安全隨機(jī)數(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)建一個(gè)具有兩個(gè)屬性（ajax_url 和 ajax_nonce）的 AutocompleteSearch 全局 Javascript 變量。這樣我們就可以在自動(dòng)完成Javascript文件中獲取WordPress AJAX URL的值，比如AutocompleteSearch.ajax_url。

*后，我們需要添加一些樣式。前面提到過，WordPress 沒有自帶任何 jQuery UI 樣式，所以我們需要自己添加一些樣式。我選擇通過 Google CDN 添加樣式表。但是我們需要知道 jQuery UI 版本號(hào)才能獲得它的樣式表。我們可以硬編碼版本號(hào)，但我不喜歡硬編碼任何東西。下面mq翻譯主題模板中的代碼，您將找到一個(gè)利用 WordPress 中存儲(chǔ)的 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() 注冊(cè)的 CDN 路徑作為第二個(gè)參數(shù)來注冊(cè)和添加新的樣式表。為了獲得有效的 jQuery UI 版本號(hào)，我們使用此函數(shù) wp_scripts() 提供的信息。

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

編寫自動(dòng)完成 Javascript

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

自動(dòng)完成.js

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

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

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

在我的主題中，標(biāo)準(zhǔn)的 WordPress 搜索字段輸入具有類 .search-field。我還添加了父表單類名以進(jìn)一步縮小范圍，因此我們不會(huì)冒險(xiǎn)將自動(dòng)完成功能應(yīng)用于使用同一類的其他事物。

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

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

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

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

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

自動(dòng)完成.js

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

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

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

將PHP中的結(jié)果返回給AJAX請(qǐng)求

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

讓我們?cè)谝韵挛恢茫ɑ蛟?PHP 中添加代碼的任何位置）設(shè)置 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ù)掛接到兩個(gè) AJAX 鉤子上。在所有與 wp_ajax AJAX 鉤子掛鉤的函數(shù)中，我們必須確保 die() 或 exit 始終在*后執(zhí)行，以避免回顯不需要的輸出。我正在使用 WordPress 的 wp_die() 函數(shù)。

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

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

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

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

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

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

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

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

可選改進(jìn)

一個(gè)常見的問題是匹配太多，自動(dòng)完成框太大。有兩種解決方案。

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

自動(dòng)完成.js

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

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

總結(jié)和完整代碼

我們已經(jīng)成功地在WordPress的搜索功能中加入了自動(dòng)補(bǔ)全功能，我們可以完全控制返回的匹配項(xiàng)。它為訪問者提供了一種更快的方式來瀏覽您的內(nèi)容，因?yàn)閱螕羝ヅ漤?xiàng)會(huì)將您直接重定向到文章，而不是先繞過搜索結(jié)果頁面。在所有 WordPress 網(wǎng)站中實(shí)現(xiàn)自動(dòng)完成可能并不總是有意義，但它對(duì)于搜索特定內(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();
}

自動(dòng)完成.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 大學(xué)并由其編譯。

聲明：本站提供的源代碼、模板、插件等資源除資源本身問題外不包含免費(fèi)技術(shù)服務(wù)。如需技術(shù)支持，需支付100+技術(shù)服務(wù)費(fèi)。詳情以客服說明為準(zhǔn)，敬請(qǐng)諒解！

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

VV君永久會(huì)員