Буквально на днях такой поиск появился у меня на блоге и я решил поделиться с вами рецептом его приготовления.
Тут ничего особенного, самая обычная вордпрессовская форма, разве что без кнопки. Можно конечно обойтись одним лишь инпутом, но вдруг у посетителя не включен 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>
На этом блоге позиционирование элементов устроено немного по-другому, поэтому если стили вам не подойдут, подправьте их сами, либо попросите об этом в комментариях к посту.
#aj_search{ position:relative; } #aj_search input{ height:20px; padding:5px; } #aj_searchresults{ position:absolute; z-index:100; top:30px; left:0; display:none; }
Обратите внимание, что здесь перечислены только необходимые стили, вам возможно придётся добавлять собственные как к полю ввода, так и к результатам поиска.
Описывать все эффекты, которые используются в поиске на моём блоге не вижу смысла, ведь главное уловить саму суть, итак:
$(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 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;
Если у вас что-то не получилось — обращайтесь ко мне, буду рад помочь 🙂
Для тех, у кого возникнут проблемы с кодировкой.
нужно немного доработать jQuery-код:
Миш, этот код будет работать, если установлена форма поиска на HTML 5?
да, почему нет)
Было бы не плохо, если бы поиск осуществлялся по дополнительным полям, это удобно былоб для небольшого интернет магазина, а может и для большого )
там тогда нужно через WP_Query результаты отбирать)
А можно как-то реализовать такой поиск, но без использования php?
Только в том случае, если это будет поиск по странице, которая уже открыта)
Спасибо!
Привет.
А как правильно осуществить поиск по всем поcтам и товарам woocomerce?
Привет,
Можно передать в WP_Query дополнительно параметр
'post_type' => array( 'post', 'product' )