WordPress网站内容搜索如果设置下拉内容显示，那么对于用户在模糊搜索上能起到很大的帮助，今天就为大家分享该如何实现：
这肯定需要JS来实现了。当然，网上这方面的JS插件也是非常多的。但是需要自己去修改里的代码，这样比较麻烦，还不如自己来一句一句地写呢。其实，实现起耿也不是那么的难。
思路：就是在wordpress主题的搜索框中每输入一个字符时，就要触发一个事件——向数据库发送请求——搜索这个输入的字符相关的信息。
这里会用到 键盘按下弹起事件，用到ajax发送请求。不多说，按步骤来。
第一步：wordpress主题搜索框代码：
<div class="dropdown search-dropdown" id="search" > <form role="search" method="get" class="search-form" action="" > <input type="search" id="<?php echo $unique_id; ?>" class="search-field ku-input " value="" name="s" /> <ul></ul><!-- 这里存放下拉列表--> <button type="submit" class="search_submit btn ku-button">search</button> </form> </div>
第二步：处理下拉的JS代码：
//根据输入框中的事件来做的事情 使用keyup来判断是否要发送请求，使用keyup在输入完词以后就会立即发送请求
var now=-1; //声明一个变量值为-1，是为了在使用上下键的时候记录li的序号
var resLength=0; //这个变量是为了存li的长度
$('.search-field').keyup(function(event){
if(event.keyCode==38 || event.keyCode==40){ //每按一次上下键都会发送一次请求，所以要先
return; //清除一边请求
};
var ss = $('.search-field').val();
if( ss != '' ){ //当输入框的值不为空的时候才能发送请求
$.ajax({
type:"post",
url:"<?php echo THEME_PATH; ?>/search_get.php", //接口文件。这里的 THEME_PATH是我声明的一个常量：当前主题路径
async:true,
data:{ ss:ss, act:'dropdown_list''},
success:function(res){
var arr = eval(res);
$('#search ul').html(""); //先清空ul里的内容
for(var i=0;i<arr.length;i++){
resLength=arr.length;
var title = arr[i].post_title;
title = title.replace(ss,'<span class="search_red">'+ss+'</span>');
oli_i=$('<li>'+ title +'</li>');
$('#search ul').append(oli_i);
//要实现点击某一条词的时候也能让输入框中出现点击的这条词，所以要在success里面设置
$('#search ul li').eq(i).click(function(){
$('.search-field').val($(this).text());
$(this).addClass('current').siblings().removeClass('current')
})
};
$('#search ul').slideDown(); //显示下拉
},
error:function(res){
console.log(res)
