WordPress显示网站搜索框的下拉内容

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)

WordPress教程网站建设

WordPress网站后台的导航栏目介绍(了解wordpress栏目)

2020-10-15 15:00:53

WordPress教程技术宅

WordPress网站后台的导航系统

2020-10-15 15:19:57

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索