В этой публикации я хотел бы поделиться с вами простым решением, как реализовать поиск на сайте с помощью технологии ajax. Преимущество такого поиска перед традиционным — очевидно, хотя бы по тому, что уменьшается нагрузка на сайт, улучшается юзабилити. Инструкция будет не сложной, поэтому, даже читатель с базовыми знаниями легко разберется.

Разобьем нашу работу на несколько этапов:

  1. Создаем js скрипт, реагирующий на набор текста в поле поиска.
  2. Создаем в файле function.php экшен, отвечающий за вывод результата.
  3. Выводим результаты в созданном html контейнере.
  4. Красиво оформляем результат выдачи.

к содержанию ↑

Подключаем необходимые скрипты

Скрипт определяет, что пользователь вводит какой-то текст в поле поиска. Событие ввода привязано к input с классом search-field, поэтому не забудьте его поменять тот, который у вас в шаблоне сайта.

jQuery(document).ready(function($){
	$('.search-field').keypress(function(eventObject){
		var searchTerm = $(this).val();
		// проверим, если в поле ввода более 2 символов, запускаем ajax
		if(searchTerm.length > 2){
			$.ajax({
				url : '/wp-admin/admin-ajax.php',
				type: 'POST',
				data:{
					'action':'codyshop_ajax_search',
					'term'  :searchTerm
				},
				success:function(result){
					$('.codyshop-ajax-search').fadeIn().html(result);
				}
			});
		}
	});
});

Не забудьте учесть один важный момент — необходимо подключить последнюю версию библиотеки jQuery. Если она не подключена, используйте код в файле function.php темы:

wp_enqueue_script('jquery');

к содержанию ↑

Создаем функцию для обработки AJAX запросов

Если вы не знаете, куда вставлять данный код, смело разместите его в файл function.php вашей темы.

// ajax поиск по сайту
function codyshop_ajax_search(){ 
	$args = array( 
		'post_type'        => 'any', 
		'post_status'      => 'publish', 
		'order'            => 'DESC', 
		'orderby'          => 'date', 
		's'                => $_POST['term'], 
		'posts_per_page'   => 5 
	); 
	$query = new WP_Query( $args ); 
	if($query->have_posts()){ 
	while ($query->have_posts()) { $query->the_post();?> 
<li>    
	<?php if(!empty($codyshop_url)) {
		the_post_thumbnail('codyshop-mini-thumbnail');
	} else{ ?>
		<span><img src="<?php echo esc_url(get_template_directory_uri().'/assets/images/default-mini.gif'); ?>" alt=""></span>
	<?php } ?>
	<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
	<?php the_excerpt();?>
 </li> 
<?php } }else{ ?>
	<li><a href="#">Ничего не найдено, попробуйте другой запрос</a></li>
<?php } exit;
}
add_action('wp_ajax_nopriv_codyshop_ajax_search','codyshop_ajax_search');
add_action('wp_ajax_codyshop_ajax_search','codyshop_ajax_search');

 
к содержанию ↑

Создаем контейнер для вывода результатов поиска

Итак, нам необходимо показать результаты поиска. Для этого, разместите сразу же после input формы поиска:

<ul class="codyshop-ajax-search"></ul>

 

Оформляем результаты выдачи

Важная особенность данной верстки — при фокусировки курсора на поле ввода, происходит  затемнение фона вокруг. Приведенное ниже оформление — лишь заготовка для темы вашего сайта, и не исключено, что потребуется адаптация.

#searchform .search-field:focus{
	box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.65);
	position: relative;
	z-index: 1051;
}
#searchform .search-field:focus ~ #searchsubmit{
	position: relative; 
	z-index: 1100;
}
.codyshop-ajax-search li{
	overflow: hidden; 
	line-height: 17px;
	width: 100%; 
	min-height: 100px; 
	max-height: 100px; 
	display: inline-block; 
	float: left;
	box-sizing: border-box;
	border-bottom: 1px solid #eeeeee;
	padding: 15px 10px;
	list-style:none;
}
.codyshop-ajax-search{
	position: fixed; 
	box-sizing: border-box; 
	background: #fff; 
	z-index: 1111; 
	border-radius: 3px; 
	border:1px solid #eee;
	border-top:none; 
	padding: 20px 20px 10px 20px; 
	display: none; 
	max-height: 500px; 
	overflow-y: auto;
}
.codyshop-ajax-search li:first-child{
	padding: 0 10px 15px 10px;
}
.codyshop-ajax-search li:last-child {
	padding: 15px 10px 0 10px; 
	border-bottom: none;
}
.codyshop-ajax-search li a{
	color: #7c83a0;
}
.codyshop-ajax-search span {
	height: 100%; 
	float: left; 
	min-height: 100px;
}
.codyshop-ajax-search li p, .codyshop-latest-post li p{
	line-height: 14px; 
	font-size: 13px;
	color: #7c83a0;
	font-style: italic; 
	background-color: white;
}
.codyshop-ajax-search li img, .codyshop-latest-post li img{
	width: 60px; 
	float: left; 
	border: 2px solid #eeeeee; 
	background-color: #eeeeee; 
	border-radius: 50%; 
	margin-right: 10px;
}

 

19 коментариев к записи

    • Посмотрите консоль браузера. Не исключён конфликт скриптов. У меня на сайте поиск выполнен именно таким образом, как описано в статье.

      • У меня выходит вот так: Failed to load resource: the server responded with /wp-admin/admin-ajax.php a status of 404 (Not Found)

      • Заработало! Пришлось прописать полный путь. Но, хотелось бы, чтоб как у вас ))

        • Ну и славненько, что заработало. Почему не сработал относительный путь к файлу в вашем случае, … затрудняюсь сказать. Нужно смотреть исходники.

  • Я разобрался, большое спасибо за великолепное решение. Надо было почему-то убрать слеш (/) перед wp-admin/admin-ajax.php. Изменил немного вывод результатов (миниатюры постов не выводились), работаю над CSS.

  • А можно как-то загрузчик прикрепить? Этот, который крутится, например, в ожидании результата. Пожалуйста.

    • Можно. Для этого на странице необходимо разместить gif картинку с крутящимся прелоадером и css стилями. Например, так: img src=»путь к картинке» style=»display: none; position: fixed;» class=»preloader»
      Затем, в момент набора текста, в js скрипте после if(searchTerm.length > 2){ прописать ее появление. Что-то вроде $(‘.preloader’).fadeIn(); Ну и в итоге, после успешного выполнения скрипта скроем его: $(‘.preloader’).fadeOut();

    • Если Вам так и непонятно? :

      /* -----------------[ Ajax search ]------------------ */
      jQuery(document).ready(function($){
      	$('.search-field').keypress(function(eventObject){
      		var searchTerm = $(this).val();
      		if(searchTerm.length > 1){
      			$('.preloader').fadeIn();
      			$.ajax({
      				url : '',
      				type: 'POST',
      				data:{
      					'action':'codyshop_ajax_search',
      					'term'  :searchTerm
      				},
      				success:function(result){
      					$('.preloader').fadeOut();	
      					$('.codyshop-ajax-search').fadeIn().html(result);
      					$('.search-ajax-submit').fadeIn().html(result);
      				} });
      		} });
      	$('.search-field').focusout(function(){
      		$('.codyshop-ajax-search').fadeOut();
      		$('.search-ajax-submit').fadeOut();
          });		
      });

      И вот загрузчик. В моем случае — иконка от FA:

  • Подскажите пожалуйста. Ваш код отлично работает, огромное спасибо. Но возникает вопрос, быть может это норма, а может просто я неправильно что-то настроил. Сам поиск работает только на главной странице, подскажите с чем это может быть связанно, и как это можно поправить?

    • Попробуйте сделать в function.php так:

      function search_ajax() { ?>

      jQuery(document).ready(function($){
      $(‘.search-field’).keypress(function(eventObject){
      var searchTerm = $(this).val();
      if(searchTerm.length > 2){
      $.ajax({
      url : »,
      type: ‘POST’,
      data:{
      ‘action’:’codyshop_ajax_search’,
      ‘term’ :searchTerm
      },
      success:function(result){
      $(‘.codyshop-ajax-search’).fadeIn().html(result);
      }
      });
      }
      });
      });

      <?php }
      add_action( 'wp_footer', 'search_ajax' );

      Когда-то была аналогичная проблема, и выход из ситуации был таков. Сейчас использую как-то также, но с более нарощенным (под себя) функционалом.

    • Могу помочь. Не знаю что с ответом, но я уже пытался комментил вас. Все из-за url : ‘/wp-admin/admin-ajax.php’

  • Благодарю за помощь. Ответ как всегда плавал на поверхности. Решение конечно же, как по мне, не из лучших, будем искать иные методы, а пока еще раз спасибо!

  • Помогите пожалуйста!
    Я не могу разобраться вот с этим пунктом: ПОДКЛЮЧАЕМ НЕОБХОДИМЫЕ СКРИПТЫ.
    Объясните пожалуйста. что нужно делать с этим кодом? Куда и как правильно его нужно подключить?
    У меня есть дочерняя тема и в ней 3 файла functions.php . style.css и header.php

    • Добрый день. Вам необходимо создать в дочерней теме javascript файл. Он с расширением .js Затем в этот файл вставить предложенный в статье скрипт. И теперь остаётся только подключить скрипт. Разместите в function.php дочерней темы следующий код:

      add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );
      function mytheme_enqueue_scripts() {
      wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/ваш-путь-к-скрипту/my-script.js', array( 'jquery' ), true );
      }

      Так как я точно не знаю, по какому пути будет располагаться ваш файлик, убедитесь самостоятельно, что путь указан верно.

  • Большое спасибо, а подскажите ещё как создать контейнер для вывода результатов поиска?
    Куда нужно поместить данный код?

    • Обычно, за вывод поиска отвечает файл searchform.php Я так понял что в дочерней теме у вас этого файла нет. Значит просто скопируйте его из родительской. После, разместите контейнер

      <ul class="codyshop-ajax-search"></ul>

      например, перед закрывающим тегом form.

Добавить комментарий