wordpress ajax搜索提示

WordPress, 转自点点 6 年前 回复

, , ,

因为我的文章很多,我又会经常查看自己的旧文,所以搜索是我使用频率非常高的一个功能,而且还和微信绑定了搜索结果,所以就更重要了,这两天外出了,晚上才回来,闲着没事,给自己的主题加上了ajax搜索提示,支持键盘操作。

大致的意思是,你输入关键字,会自动提示搜索结果,当然是不影响enter进入搜索页面的,看上去高端大气上档次~你可以去感受下

实用性就不做评价了,重要的是可以装逼~废话不多数,let's do it.

首先要改装你的search.php,让这货可以返回json数据

< ?php get_header() ;?>替换成下面的代码

< ?php
             
    if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
        $array_posts = array ();
        if (have_posts()) :
             while (have_posts()) : the_post();
                 array_push($array_posts, array("title"=>get_the_title(),"url"=>get_permalink()));
             endwhile;
        endif;
        echo json_encode($array_posts);
    } else {
             
get_header(); ?>

< ?php get_footer() ;?>替换成下面的代码

< ?php get_footer();
    }?>

这样就能返回json数据了。

然后还得装修下你的搜索样式,主要是为提示结果做定位的

然后就是JS代码了,需要先利用php顶一个变量,在footer.php中加入下面的代码

然后下面的代码放到你的JS文件中

//search
var input_search = $("#search-input");
function makeAjaxSearch(result) {
    if (result.length == 0) {
        $("#search_filtered").empty().show().append('
  • 这能搜到嘛?
  • '); } else { $("#search_filtered").empty().show(); for (var i = 0; i < result.length; i++) $("#search_filtered").append('
  • ' + result[i]["title"] + ''); } } var delaySearch; function startSearch() { $.ajax({ type: "GET", url: home_url, data: "s=" + input_search.val(), dataType: 'json', success: function (result) { makeAjaxSearch(result); console.log(result); } }); } var event_ajax_search = { bind_event: function () { input_search.bind('keyup', function (e) { if (input_search.val() != "" && e.keyCode != 40) { if (delaySearch) { clearTimeout(delaySearch) } delaySearch = setTimeout(startSearch, 200); } if (e.keyCode == 40) { search_filtered.moveable(); } }) }, unbind_event: function () { input_search.unbind('keyup'); } }; var search_filtered = { moveable: function () { var current = 0; $('#search_filtered').find('a').eq(current).focus(); $(document).bind("keydown.search_result", function (e) { if (e.keyCode == 40) { if (current >= $('#search_filtered').find('a').size()) { current = 0; } $('#search_filtered').find('a').eq(++current).focus(); e.preventDefault(); } if (e.keyCode == 38) { if (current < 0) { current = $('#search_filtered').find('a').size() - 1; } $('#search_filtered').find('a').eq(--current).focus(); e.preventDefault(); } }); }, hide: function () { $(document).unbind("keyup.search_result"); $('#search_filtered').fadeOut(); } }; input_search.focus(function () { event_ajax_search.bind_event(); }).blur(function () { event_ajax_search.unbind_event(); });
  • 最后放上优雅的CSS

    .filter_container {display: inline-block;position: relative;}
    .ajax_search .search_filtered a {display: block;font-size: 12px;overflow: hidden;padding: 7px 12px 7px 10px;text-overflow: ellipsis;white-space: nowrap;width: 153px;color: #D14836;}
    .ajax_search .search_filtered {background-color: rgba(255, 255, 255, 0.95);left: 0;position: absolute;text-align: left;top: 102%;z-index: 200;}
    #search-input{float: left;border:none;height:22px;width:150px;padding-right:25px;line-height: 22px;text-indent: 10px;font-size:12px;background-color: transparent;background-image:url(img/search.png);background-repeat:no-repeat;background-position:right center}
    #search-input:focus{background-color: #fff;}
    #searchsubmit{display: none;}
    .ajax_search .search_filtered a:hover, .ajax_search .search_filtered a:focus {background-color: rgba(0, 0, 0, 0.03);text-decoration: none;outline:thin dotted}

    Via: http://fatesinger.com/3033.html

    支付宝打赏微信打赏

    如果此文对你有帮助,欢迎打赏作者。

    发表评论

    欢迎回来 (打开)

    (必填)

    8156