6680525:1.28
也想出现在这里?联系我们
877666255:3.7
也想出现在这里?联系我们
863966888:3.13
也想出现在这里?联系我们
您好!欢迎来到模板下载吧!本站资源24小时自动发货,请放心选购,一次付费,终身下载,售后请提交工单!

wordpress ajax实现搜索提示

半岛未凉° 2019-10-11 快速入门 223 已收录 本文共4776个字,预计阅读需要12分钟。
  • 文章介绍
  • 快速入门
  • 增值服务

你使用过百度吧~~你知道当你输入关键词的一部分时,关键词的剩下的部分会提示出来的,如此神奇的效果对于wordpess是前所未有的,大致的意思是,你输入关键字,会自动提示搜索结果,当然是不影响enter进入搜索页面的,看上去高端大气上档次~你可以去感受下,实用性就不做评价了,重要的是可以装逼~废话不多数,let’s do it.首先要改装你的search.php,让这货可以返回json数据,把 get_header() 替换成下面的代码。

  1. <code><?php  
  2.   
  3.     if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){  
  4.         $array_posts = array ();  
  5.         if (have_posts()) :  
  6.              while (have_posts()) : the_post();  
  7.                  array_push($array_posts, array("title"=>get_the_title(),"url"=>get_permalink()));  
  8.              endwhile;  
  9.         endif;  
  10.         echo json_encode($array_posts);  
  11.     } else {  
  12.   
  13. get_header(); ?></code>  

把 get_footer() 替换成下面的代码

  1. <code><?php get_footer();}?></code>  

这样就能返回json数据了,然后还得装修下你的搜索样式,主要是为提示结果做定位的。

  1. <code><div id="search-container" class="ajax_search">  
  2.             <form method="get" id="searchform" action="<?php echo esc_url(home_url('/')); ?>">  
  3.                 <div class="filter_container"><input type="text" value="" autocomplete="off" placeholder="输入内容并回车" name="s" id="search-input"/><ul id="search_filtered" class="search_filtered"></ul> </div>  
  4.                 <input type="submit" name="submit" id="searchsubmit" class="searchsubmit" value=""/>  
  5.             </form>  
  6. </div></code>  

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

  1. <code><script>var home_url="<?php echo esc_url(home_url('/')); ?>";</script></code>  

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

  1. <code>//search  
  2. var input_search = $("#search-input");  
  3. function makeAjaxSearch(result) {  
  4.     if (result.length == 0) {  
  5.         $("#search_filtered").empty().show().append('<li><a href="javascript:vold(0)"><strong>这能搜到嘛?</strong></a></li>');  
  6.     } else {  
  7.         $("#search_filtered").empty().show();  
  8.         for (var i = 0; i < result.length; i++) $("#search_filtered").append('<li><a href="' + result[i]["url"] + '">' + result[i]["title"] + '</a></li>');  
  9.     }  
  10. }  
  11. var delaySearch;  
  12.   
  13. function startSearch() {  
  14.     $.ajax({  
  15.         type: "GET",  
  16.         url: home_url,   
  17.         data: "s=" + input_search.val(),  
  18.         dataType: 'json',  
  19.         success: function (result) {  
  20.             makeAjaxSearch(result);  
  21.             console.log(result);  
  22.         }  
  23.     });  
  24. }  
  25. var event_ajax_search = {  
  26.     bind_event: function () {  
  27.         input_search.bind('keyup', function (e) {  
  28.             if (input_search.val() != "" && e.keyCode != 40) {  
  29.                 if (delaySearch) {  
  30.                     clearTimeout(delaySearch)  
  31.                 }  
  32.                 delaySearch = setTimeout(startSearch, 200);  
  33.             }  
  34.             if (e.keyCode == 40) {  
  35.                 search_filtered.moveable();  
  36.             }  
  37.         })  
  38.     },  
  39.     unbind_event: function () {  
  40.         input_search.unbind('keyup');  
  41.     }  
  42. };  
  43. var search_filtered = {  
  44.     moveable: function () {  
  45.         var current = 0;  
  46.         $('#search_filtered').find('a').eq(current).focus();  
  47.         $(document).bind("keydown.search_result"function (e) {  
  48.             if (e.keyCode == 40) {  
  49.   
  50.                 if (current >= $('#search_filtered').find('a').size()) {  
  51.                     current = 0;  
  52.                 }  
  53.   
  54.                 $('#search_filtered').find('a').eq(++current).focus();  
  55.                 e.preventDefault();  
  56.   
  57.             }  
  58.             if (e.keyCode == 38) {  
  59.                 if (current < 0) {  
  60.                     current = $('#search_filtered').find('a').size() - 1;  
  61.                 }  
  62.   
  63.                 $('#search_filtered').find('a').eq(--current).focus();  
  64.                 e.preventDefault();  
  65.             }  
  66.         });  
  67.     },  
  68.     hide: function () {  
  69.         $(document).unbind("keyup.search_result");  
  70.         $('#search_filtered').fadeOut();  
  71.     }  
  72. };  
  73. input_search.focus(function () {  
  74.     event_ajax_search.bind_event();  
  75. }).blur(function () {  
  76.         event_ajax_search.unbind_event();  
  77.     });  
  78. </code>  

最后放上优雅的CSS

  1. <code>.filter_container {displayinline-block;positionrelative;}  
  2. .ajax_search .search_filtered a {displayblock;font-size12px;overflowhidden;padding7px 12px 7px 10px;text-overflow: ellipsis;whitewhite-spacenowrap;width153px;color#D14836;}  
  3. .ajax_search .search_filtered {background-color: rgba(255, 255, 255, 0.95);left: 0;positionabsolute;text-alignleft;top: 102%;z-index: 200;}  
  4. #search-input{floatleft;border:none;height:22px;width:150px;padding-right:25px;line-height22px;text-indent10px;font-size:12px;background-colortransparent;background-image:url(img/search.png);background-repeat:no-repeat;background-position:rightright center}  
  5. #search-input:focus{background-color#fff;}  
  6. #searchsubmit{displaynone;}  
  7. .ajax_search .search_filtered a:hover, .ajax_search .search_filtered a:focus {background-color: rgba(0, 0, 0, 0.03);text-decorationnone;outline:thin dotted}</code>  

上一篇:

下一篇:

wordpress ajax实现搜索提示:等您坐沙发呢!
大牛,别默默的看了,快来点评一下吧!:)。

您必须登录后才能发表评论哦!:)

站内登录 QQ登录 微博登录
wordpress自适应高级图片shejigh主题

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系作者

模板下载吧,累计帮助1000+用户成功建站,为草根创业提供助力!

立刻开启你的建站之旅
现在加入模板下载吧,注册一个账号
  • 模板下载吧拥有海量网站模板及源码,站长亲测干净无后门。

  • 注册即能下载免费模板栏目资源,帮您更快的完成网站建设。

  • 每日更新模板资源,每日精品推荐,及时获取最新模板资源流行去向。

  • 完美的售后服务,帮助草根站长、企业等成功建站。

  • 将您最爱的资源收藏,建立自己的资源库,并与朋友分享。