你使用过百度吧~~你知道当你输入关键词的一部分时，关键词的剩下的部分会提示出来的，如此神奇的效果对于wordpess是前所未有的，大致的意思是，你输入关键字，会自动提示搜索结果，当然是不影响enter进入搜索页面的，看上去高端大气上档次~你可以去感受下，实用性就不做评价了，重要的是可以装逼~废话不多数，let’s do it.首先要改装你的search.php，让这货可以返回json数据，把 get_header() 替换成下面的代码。
- <code><?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(); ?></code>
把 get_footer() 替换成下面的代码
- <code><?php get_footer();}?></code>
这样就能返回json数据了，然后还得装修下你的搜索样式，主要是为提示结果做定位的。
- <code><div id="search-container" class="ajax_search">
- <form method="get" id="searchform" action="<?php echo esc_url(home_url('/')); ?>">
- <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>
- <input type="submit" name="submit" id="searchsubmit" class="searchsubmit" value=""/>
- </form>
- </div></code>
然后就是JS代码了，需要先利用php顶一个变量，在footer.php中加入下面的代码
- <code><script>var home_url="<?php echo esc_url(home_url('/')); ?>";</script></code>
然后下面的代码放到你的JS文件中
- <code>//search
- var input_search = $("#search-input");
- function makeAjaxSearch(result) {
- if (result.length == 0) {
- $("#search_filtered").empty().show().append('<li><a href="javascript:vold(0)"><strong>这能搜到嘛？</strong></a></li>');
- } else {
- $("#search_filtered").empty().show();
- for (var i = 0; i < result.length; i++) $("#search_filtered").append('<li><a href="' + result[i]["url"] + '">' + result[i]["title"] + '</a></li>');
- }
- }
- 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();
- });
- </code>
最后放上优雅的CSS
- <code>.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;whitewhite-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:rightright 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}</code>
