Создание выпадающего поиска на jQuery в WordPress

Обновлено  /  jQuery  /  10 комментариев

Буквально на днях такой поиск появился у меня на блоге и я решил поделиться с вами рецептом его приготовления.

HTML

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

Вставляем этот код куда вздумается.

<div id="aj_search">
	<form action="<?php bloginfo('url') ?>" method="GET">
		<input type="text" name="s" id="s" value="поиск..." autocomplete="off" />
	</form>
	<div id="aj_searchresults"></div>
</div>

CSS

На этом блоге позиционирование элементов устроено немного по-другому, поэтому если стили вам не подойдут, подправьте их сами, либо попросите об этом в комментариях к посту.

#aj_search{
	position:relative;
}
 
#aj_search input{
	height:20px;
	padding:5px;
}
 
#aj_searchresults{
	position:absolute;
	z-index:100;
	top:30px;
	left:0;
	display:none;
}

Обратите внимание, что здесь перечислены только необходимые стили, вам возможно придётся добавлять собственные как к полю ввода, так и к результатам поиска.

jQuery

Описывать все эффекты, которые используются в поиске на моём блоге не вижу смысла, ведь главное уловить саму суть, итак:

$(document).ready(function(){
	$('#s').focus(function(){
		if($(this).val() == 'поиск...') {
			$(this).val('');
		} else {
			$('#aj_searchresults').show();
		}
		$(this).addClass('blured');
	}).blur(function(){
		if($('#s').hasClass('blured')){
			$('#aj_searchresults').hide();
			if($(this).val() == ''){
				$(this).val('поиск...');
			}
		}
	}).keyup(function() {
		$.ajax({
			'type':   'post',
			'url' :   '<?php bloginfo('stylesheet_directory') ?>/my_search.php',
			'data':   's=' + $(this).val(),
			'success': function (result) {
				$('#aj_searchresults').show().html(result);
			}
		})
	});
	$('#aj_searchresults').mouseout(function(){
		$('#s').addClass('blured');
	}).mouseover(function(){
		$('#s').removeClass('blured');
	});
});

PHP

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

<?php
if ( 'POST' != $_SERVER['REQUEST_METHOD'] ) {
	header('Allow: POST');
	header('HTTP/1.1 405 Method Not Allowed');
	header('Content-Type: text/html');
	include '404.php';
	exit;
}
 
include_once '../../../wp-load.php';
 
$str = addslashes($_POST['s']);
 
function filter_where( $where = ''){
	global $str;
	$where .= " AND post_title LIKE '%$str%' ";
	return $where;
}
 
add_filter('posts_where', 'filter_where');
 
$result = new WP_Query('post_status=publish');
 
remove_filter('posts_where', 'filter_where');
 
if($result->have_posts()):
	while ($result->have_posts()) : $result->the_post(); ?>
		<a href="<?php the_permalink(); ?>">
			<h5><?php the_title(); ?></h5>
			<p><?php the_excerpt(); ?></p>
		</a><?php
	endwhile; 
else: ?>
	<div>
		<p>Ничо не найдено.</p>
	</div>
<?php endif;

Если у вас что-то не получилось — обращайтесь ко мне, буду рад помочь 🙂

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Комментарии — 10

Комментирование этого поста более не доступно.