因为我的文章很多，我又会经常查看自己的旧文，所以搜索是我使用频率非常高的一个功能，而且还和微信绑定了搜索结果，所以就更重要了，这两天外出了，晚上才回来，闲着没事，给自己的主题加上了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('

' + 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

声明：本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自 你好！刘

本文地址：wordpress ajax搜索提示