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

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

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;

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

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Смотрите также

Комментарии 8

  • Миша29 марта 2012 в 12:03 #

    Для тех, у кого возникнут проблемы с кодировкой.
    нужно немного доработать jQuery-код:

    $.ajax({
    	'type':   'post',
    	'url' :   '<?php bloginfo('stylesheet_directory') ?>/my_search.php',
    	'data':   's=' + $(this).val(),
    	'beforeSend': function ( xhr ) {
    		xhr.overrideMimeType("text/html; charset=utf-8");
    	},
    	'success': function (result) {
    		$('#aj_searchresults').show().html(result);
    	}
    });
  • Ник23 октября 2012 в 23:10 #

    Миш, этот код будет работать, если установлена форма поиска на HTML 5?

  • Vintorez19 ноября 2012 в 12:11 #

    Было бы не плохо, если бы поиск осуществлялся по дополнительным полям, это удобно былоб для небольшого интернет магазина, а может и для большого )

  • Lidia15 января 2013 в 16:01 #

    А можно как-то реализовать такой поиск, но без использования php?

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Комментарии закрыты.
  • Миша: Привет ещё раз, не поверишь, реально не сталкивался с этим вопросом. По теории можно сказать следующее: во-первых,...

  • Миша: Привет, вообще без проблем, делаешь всё через require(), require_once() - выбирай любую, какая больше нравится.

  • Виталий Моргунов: Привет! Не могу разобаться, как я могу контролировать порядок подключения стилей. В моем случае мне нужно чтобы стили...

  • Миша: Спасибо!

  • w0rmak: Это было просто. Нашел код в интернете. Добавьте и себе ymaps.load(function () { var input = document.getElem...