WordPress 搜索下拉關(guān)鍵詞提示

我想了半天，也沒(méi)給這篇文章一個(gè)準(zhǔn)確的標(biāo)題，來(lái)張圖說(shuō)明大家肯定就明白了：

百度搜索，只要你打上關(guān)鍵詞，就會(huì)自動(dòng)彈出下拉框提示有關(guān)內(nèi)容，這么炫的功能我們一定要給自己的博客加上！

方法有兩種，兩種方法效果略有不同，稍后會(huì)詳細(xì)解釋。

方法一、插件

@萬(wàn)戈 制作了一個(gè)插件，可以實(shí)現(xiàn)上述功能，非常簡(jiǎn)單，什么都不用做，直接下載安裝即可（該插件未被提交到官方，無(wú)法在線安裝）：官方下載 | 備用下載

其實(shí)這個(gè)插件有一個(gè)缺點(diǎn)：只能匹配標(biāo)簽，不能直接匹配文章內(nèi)容，這讓插件感覺(jué)很不實(shí)用。

方法二、代碼

代碼比插件法更實(shí)用，可以匹配出文章，但對(duì)沒(méi)有什么技術(shù)的新手，實(shí)現(xiàn)卻是一個(gè)挑戰(zhàn)（該代碼來(lái)自 @大發(fā)）。

1、首先打開(kāi)主題的 search.php，找到：

get_header();

替換成：

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();

再找到：

get_footer();

替換為：

get_footer();}

然后對(duì)搜索框代碼進(jìn)行改造，給搜索結(jié)果做定位。按照下邊的例子修改搜索框：

<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="輸入內(nèi)容并回車(chē)" 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>

接著在 footer.php 中的：

<?php wp_footer(); ?>

前加入下邊的代碼：

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

最后在 JS 文件中貼上下邊的代碼：

//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();
});

參考 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}

總結(jié)

第二種方法效果比第一種好，但顯然麻煩爆了，如果你比較懶，而又喜歡好的效果，很遺憾，我也沒(méi)辦法。

唉，自己衡量利弊吧！