WordPress 搜索下拉关键词提示

我想了半天，也没给这篇文章一个准确的标题，来张图说明大家肯定就明白了：

bgbk.org-20130920_1

百度搜索，只要你打上关键词，就会自动弹出下拉框提示有关内容，这么炫的功能我们一定要给自己的博客加上！

方法有两种，两种方法效果略有不同，稍后会详细解释。

文章目录

Toggle

方法一、插件

@万戈制作了一个插件，可以实现上述功能，非常简单，什么都不用做，直接下载安装即可（该插件未被提交到官方，无法在线安装）：官方下载 | 备用下载

其实这个插件有一个缺点：只能匹配标签，不能直接匹配文章内容，这让插件感觉很不实用。

bgbk.org-20130920_2

方法二、代码

代码比插件法更实用，可以匹配出文章，但对没有什么技术的新手，实现却是一个挑战（该代码来自 @大发）。

1、首先打开主题的 search.php，找到：

get_header();

替换成：

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) &amp;&amp; strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
		$array_posts = array ();
		if (have_posts()) :
			 while (have_posts()) : the_post();
				 array_push($array_posts, array(&quot;title&quot;=&gt;get_the_title(),&quot;url&quot;=&gt;get_permalink()));
			 endwhile;
		endif;
		echo json_encode($array_posts);
	} else {
get_header();

再找到：

get_footer();

替换为：

get_footer();}

然后对搜索框代码进行改造，给搜索结果做定位。按照下边的例子修改搜索框：

&lt;div id=&quot;search-container&quot; class=&quot;ajax_search&quot;&gt;
	&lt;form method=&quot;get&quot; id=&quot;searchform&quot; action=&quot;&lt;?php echo esc_url(home_url('/')); ?&gt;&quot;&gt;
		&lt;div class=&quot;filter_container&quot;&gt;&lt;input type=&quot;text&quot; value=&quot;&quot; autocomplete=&quot;off&quot; placeholder=&quot;输入内容并回车&quot; name=&quot;s&quot; id=&quot;search-input&quot;/&gt;&lt;ul id=&quot;search_filtered&quot; class=&quot;search_filtered&quot;&gt;&lt;/ul&gt; &lt;/div&gt;
		&lt;input type=&quot;submit&quot; name=&quot;submit&quot; id=&quot;searchsubmit&quot; class=&quot;searchsubmit&quot; value=&quot;&quot;/&gt;
	&lt;/form&gt;
&lt;/div&gt;

接着在 footer.php 中的：

&lt;?php wp_footer(); ?&gt;

前加入下边的代码：

&lt;script&gt;var home_url=&quot;&lt;?php echo esc_url(home_url('/')); ?&gt;&quot;;&lt;/script&gt;

最后在 JS 文件中贴上下边的代码：

//search
var input_search = $(&quot;#search-input&quot;);
function makeAjaxSearch(result) {
	if (result.length == 0) {
		$(&quot;#search_filtered&quot;).empty().show().append('&lt;li&gt;&lt;a href=&quot;javascript:vold(0)&quot;&gt;&lt;strong&gt;这能搜到嘛？&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;');
	} else {
		$(&quot;#search_filtered&quot;).empty().show();
		for (var i = 0; i &lt; result.length; i++) $(&quot;#search_filtered&quot;).append('&lt;li&gt;&lt;a href=&quot;' + result[i][&quot;url&quot;] + '&quot;&gt;' + result[i][&quot;title&quot;] + '&lt;/a&gt;&lt;/li&gt;');
	}
}
var delaySearch;
 
function startSearch() {
	$.ajax({
		type: &quot;GET&quot;,
		url: home_url, 
		data: &quot;s=&quot; + 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() != &quot;&quot; &amp;&amp; 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(&quot;keydown.search_result&quot;, function (e) {
			if (e.keyCode == 40) {
 
				if (current &gt;= $('#search_filtered').find('a').size()) {
					current = 0;
				}
 
				$('#search_filtered').find('a').eq(++current).focus();
				e.preventDefault();
 
			}
			if (e.keyCode == 38) {
				if (current &lt; 0) {
					current = $('#search_filtered').find('a').size() - 1;
				}
 
				$('#search_filtered').find('a').eq(--current).focus();
				e.preventDefault();
			}
		});
	},
	hide: function () {
		$(document).unbind(&quot;keyup.search_result&quot;);
		$('#search_filtered').fadeOut();
	}
};
input_search.focus(function () {
	event_ajax_search.bind_event();
}).blur(function () {
	event_ajax_search.unbind_event();
});

//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}

总结

第二种方法效果比第一种好，但显然麻烦爆了，如果你比较懒，而又喜欢好的效果，很遗憾，我也没办法。

唉，自己衡量利弊吧！

来源：

https://www.wpdaxue.com/keyword-search-dropdown-tips.html

方法一、插件

方法二、代码

总结

猜你喜欢