Вопрос или проблема
Я следил за этим, и это работает почти идеально, но оно находит не только заголовки постов с теми же словами, что мы вводим в поле ввода, а находит ВСЕ посты независимо от этого.
HTML
<input name="usp-title" id="usp-title" type="text" value="" data-required="true" required="required" maxlength="99" placeholder="Введите здесь..." class="usp-input usp-input-title form-control">
AJAX
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<script type="text/javascript">
function fetch(){
console.log(jQuery('#usp-title').val());
jQuery.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'post',
data: { action: 'data_fetch', exactwords: jQuery('#usp-title').val() },
success: function(data) {
var text1;
var text1B;
var text2;
var text2B;
jQuery("#datafetch").html(data).promise().done(function(){
text1 = jQuery("#datafetch").find("h2").find("a").html();
text1B = text1.toLowerCase();
text2 = jQuery('#usp-title').val();
text2B = text2.toLowerCase();
console.log(text1B);
console.log(text2B);
if (text1B != text2B) {
jQuery("#componi").removeAttr("disabled", "disabled").show();
jQuery("#fatto").hide();
//jQuery('#datafetch').empty();
} else if (text1B == text2B) {
jQuery("#componi").attr("disabled", "disabled").hide();
}
});
}
});
}
</script>
PHP
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){
$the_query = new WP_Query( array( 'posts_per_page' => 1, 's' => esc_attr( $_POST['usp-title'] ), 'post_type' => 'post' ) );
if( $the_query->have_posts() ) : ?>
<div class="jumbotron">
<h4>Мы уже нашли занятия с тем же заголовком,<br>используйте одно из них или напишите другой заголовок.</h4>
</div>
<ul class="list-unstyled margin-top-80">
<?php while( $the_query->have_posts() ): $the_query->the_post(); ?>
<li>
<?php $time = usp_get_meta(false, 'usp-custom-10'); ?>
<?php $space = usp_get_meta(false, 'usp-custom-3'); ?>
<?php $spaceB = usp_get_meta(false, 'usp-custom-7'); ?>
<h2><a target="_blank" href="https://wordpress.stackexchange.com/questions/263028/<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></h2>
<p><strong>Пространство:</strong> <?php echo $space;?> <?php echo $spaceB; ?></p>
<p><strong>Время:</strong> <?php echo $time; ?></p>
<?php the_excerpt(); ?>
</li>
<?php endwhile;
wp_reset_postdata(); ?>
</ul>
<?php endif;
die();
}
Как я могу ограничить результаты только теми, у кого тот же заголовок, что и в текстовом поле ввода?
Это больше похоже на хак, но я не мог найти другого способа, пробовал exact= "true" и sentence="true" в качестве параметров в запросе, но все равно получал все результаты, а не только точно совпадающие. Поэтому, так как у меня были результаты в виде списка, я делаю проверку в DOM и удаляю всё, что не совпадает точно с .val()
function searchAjax(){
jQuery.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'post',
data: { action: 'data_fetch', exactwords: jQuery('#usp-title').val() },
success: function(data) {
var text2;
var text2B;
text2 = jQuery('#usp-title').val();
text2B = text2.toLowerCase();
jQuery("#datafetch").html(data).promise().done(function(){
jQuery("#datafetch ul li h2 a").each(function() {
var $this = jQuery(this);
if ($this.text().toLowerCase() !== text2B) {
$this.parent().parent().remove();
jQuery(".jumbotron").remove();
jQuery("#componi").removeAttr("disabled", "disabled").show();
} else if ($this.text().toLowerCase() == text2B) {
jQuery("#componi").attr("disabled", "disabled").hide();
}
});
});
}
});
}
.
Ответ или решение
Чтобы реализовать поиск с использованием AJAX, который будет находит только те посты, заголовки которых точно совпадают с введённым текстом, выполним следующие шаги, как в JavaScript, так и в PHP. После прочтения вашего кода, я вижу, что вам нужно внести изменения в ваше PHP-запрос, а также немного улучшить логику JavaScript.
Шаг 1: Изменение PHP-кода
Ваш текущий код использует стандартный поиск WordPress, но не проверяет на точное совпадение заголовков постов. Для того чтобы добиться этого, можно использовать WP_Query с post_title__in или фильтровать результаты после получения.
Вот пример, как это сделать:
add_action('wp_ajax_data_fetch', 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch', 'data_fetch');
function data_fetch() {
$search_title = esc_attr(trim($_POST['exactwords'])); // Получаем текст из Ajax запроса
$the_query = new WP_Query(array(
'posts_per_page' => -1, // Получить все посты
'post_type' => 'post',
's' => $search_title, // Стандартный поиск по содержимому
));
// Обрабатываем результаты
if ($the_query->have_posts()) : ?>
<div class="jumbotron">
<h4>Мы нашли посты, совпадающие с заголовком "<?php echo $search_title; ?>".</h4>
</div>
<ul class="list-unstyled margin-top-80">
<?php while ($the_query->have_posts()) : $the_query->the_post();
if (stripos(get_the_title(), $search_title) !== false): // Проверяем совпадение заголовка
?>
<li>
<h2><a target="_blank" href="<?php echo esc_url(post_permalink()); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
</li>
<?php
endif;
endwhile; ?>
</ul>
<?php else : ?>
<h4>Не найдено постов с заголовком "<?php echo $search_title; ?>".</h4>
<?php endif;
wp_reset_postdata(); // Сбрасываем посты
die();
}Шаг 2: Улучшение JavaScript
Теперь вы можете несколько улучшить ваш JavaScript-код, чтобы обрабатывать полученные и фильтровать результат по заголовкам. Вам не нужно будет повторно проверять совпадение в DOM:
function fetch() {
const inputValue = jQuery('#usp-title').val().trim(); // Получаем значение инпута
jQuery.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'post',
data: { action: 'data_fetch', exactwords: inputValue },
success: function(data) {
jQuery("#datafetch").html(data).promise().done(function(){
// Настройка элементов на основе полученных данных
const results = jQuery("#datafetch ul li");
if (results.length === 0) {
jQuery("#componi").removeAttr("disabled").show();
} else {
jQuery("#componi").attr("disabled", "disabled").hide();
}
});
}
});
}Заключение
Данная доработка позволит вашему AJAX-поиску находить только те посты, заголовки которых точно соответствуют введённому тексту в поле ввода. Убедитесь, что вы защищаете ваш сайт от запросов и используете механизмы кэширования, если это необходимо.
Следуя этим рекомендациям, вы значительно улучшите функциональность своего AJAX-поиска и создадите более удобный и интуитивный пользовательский опыт.