Буквально на днях такой поиск появился у меня на блоге и я решил поделиться с вами рецептом его приготовления.
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; |
Если у вас что-то не получилось — обращайтесь ко мне, буду рад помочь 🙂
Источник: misha.blog
