wordpress ajax实现搜索提示

你使用过百度吧~~你知道当你输入关键词的一部分时,关键词的剩下的部分会提示出来的,如此神奇的效果对于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>  
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有M币奖励和额外收入!

模板下载吧 快速入门 wordpress ajax实现搜索提示 https://www.mbxzb.com/blog/file/rumen/15289.html

从明天起,做一个幸福的人,喂马、劈柴、周游世界…

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
官方客服团队

为您解决烦忧 - 24小时在线 专业服务