Вопрос или проблема
У меня есть поле ввода, и когда пользователи вводят текст, происходит проверка на наличие введенного пользователем названия категории.
Js
(function($) { // ready handler
$(".universalSearchField").keypress(function() {
$.ajax({
url: "/wp-admin/admin-ajax.php",
type: "post",
data: { action: "universalSearchlist", keyword: $("#searchdata").val() },
success: function(data) {
console.log(data);
// $("#datafetch").html( data );
}
});
});
})(jQuery);
Function.php
add_action('wp_ajax_universalSearchlist','universalSearch');
add_action('wp_ajax_nopriv_universalSearchlist','universalSearch');
function universalSearch(){
$the_query = new WP_Query( array('category_name' => esc_attr( $_POST['universalSearchlist'] ), 'post_type' => 'post' ) );
foreach ( $the_query->posts as $p ) {
$categories = get_the_category($p->ID);
if (!empty($categories) ) {
echo esc_html( $categories[0]->name );
}
}
}
Я получаю все категории и хочу, чтобы при вводе текста пользователем начиналась проверка на наличие названия категории.
Используйте get_cat_ID(‘название категории’) https://developer.wordpress.org/reference/functions/get_cat_id/
<?php
$category_id = get_cat_ID('Category Name');
if($category_id > 0){
echo 'category exists';
}else{
echo 'category NOT exists';
}
?>
Использовать admin-ajax.php и писать собственный обработчик не обязательно, я бы обычно посоветовал создать REST API endpoint, но даже это не нужно здесь.
Просто попросите REST API получить категорию. Если он её возвращает, она существует, если нет — значит, её нет.
Например, https://example.com/wp-json/wp/v2/categories/?slug=categoryname
В JavaScript это может выглядеть так:
async function check_category_exists( slug ) {
let response = await fetch( `https://example.com/wp-json/wp/v2/categories/?slug=${slug}` );
if (response.ok) { // если HTTP-статус 200-299
// получаем тело ответа (метод объяснен ниже)
let json = await response.json();
return ( json.length > 0 );
} else {
throw new Exception( "HTTP-Error: " + response.status );
}
}
Теперь у нас есть асинхронная JS функция, которая получает термин и, если он найден, возвращает true, а если нет — false. Помните, что они возвращают промисы, аналогично AJAX функциям в jQuery и других местах. Вы будете использовать это так:
check_category_exists( "test" ).then(
( result ) => {
if ( result ) {
console.log( "test exists" );
} else {
console.log( "it does not exist" );
}
}
).catch(
error => console.log( "something went wrong" )
);
Не забудьте изменить example.com на свой сайт, или, что еще лучше, сделайте так, чтобы WP предоставил путь к вашему REST API на странице, чтобы вы могли получить к нему доступ и использовать тот же код везде (подсказка: спросите об этом вопросе на сайте, это легко ответить, но есть много интересного, что нужно знать).
Также вы можете получить категории из REST API через /wp-json/wp/v2/categories и сохранить их в массив/список. Затем вы можете использовать массив для отображения элементов в вашем поиске и проверить, находится ли элемент в этом массиве, чтобы увидеть, существует ли он.
.
Ответ или решение
Вопрос заключается в том, как определить, доступна ли категория, введенная пользователем в текстовом поле. Для решения этой задачи можно использовать несколько различных подходов. Давайте рассмотрим их подробно.
1. Использование REST API WordPress
WordPress предоставляет REST API, с помощью которого можно легко проверить наличие категории. Это более оптимальный и производительный способ, чем использование admin-ajax.php, поскольку не требует создания кастомных обработчиков.
Асинхронная функция на JavaScript:
Для начала мы создадим асинхронную функцию, которая будет отправлять запрос на REST API и проверять, существует ли категория.
async function check_category_exists( slug ) {
let response = await fetch(`https://example.com/wp-json/wp/v2/categories/?slug=${slug}`);
if (response.ok) {
let json = await response.json();
return (json.length > 0);
} else {
throw new Error( "HTTP-Error: " + response.status );
}
}
// Использование функции
check_category_exists("категория").then((result) => {
if (result) {
console.log("Категория существует");
} else {
console.log("Категория не существует");
}
}).catch(error => console.error("Произошла ошибка: " + error));2. Обработка во время ввода
Можно реализовать проверку в момент, когда пользователь начинает вводить текст в поле. Это сделает интерфейс более интерактивным и отзывчивым.
Пример с событием keypress:
document.querySelector(".universalSearchField").addEventListener("keypress", function() {
let query = this.value;
check_category_exists(query).then((result) => {
if (result) {
console.log("Категория найдена");
} else {
console.log("Категория не найдена");
}
}).catch(error => console.error("Ошибка при проверке категории: " + error));
});3. Предварительное кэширование категорий
Если у вас большой список категорий и вы хотите уменьшить количество запросов, можно предварительно загрузить все категории в отдельный массив и затем проверять наличие нужной категории в этом массиве.
Пример получения всех категорий:
async function getAllCategories() {
let response = await fetch("https://example.com/wp-json/wp/v2/categories");
if (response.ok) {
let categories = await response.json();
return categories.map(cat => cat.slug);
} else {
throw new Error("HTTP-Error: " + response.status);
}
}
let categoryList = await getAllCategories();
function checkCategoryInList(slug, list) {
return list.includes(slug);
}
// Использование
let exists = checkCategoryInList("example", categoryList);
console.log(exists ? "Категория существует" : "Категория не существует");Заключение
Выбор метода зависит от вашего конкретного сценария использования и предпочтений. REST API обеспечивает гибкость и масштабируемость, а предварительное кэширование может быть полезным для улучшения производительности и снижения нагрузки на сервер. Внедрение проверки в момент ввода пользователем текста делает решение более интерактивным. Убедитесь, что вы заменили example.com на ваш реальный домен, чтобы успешно выполнить запросы.