В этой публикации я хотел бы поделиться с вами простым решением, как реализовать поиск на сайте с помощью технологии 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;
}

 

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

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

      • У меня выходит вот так: 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:

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