专注国内外云服务器
分享建站技术教程

如何才能让WordPress主题在搜索框输入时显示下拉关键词列表?

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

吾上云WORDPRESS教程最新“如何才能让WordPress主题在搜索框输入时显示下拉关键词列表?”

正常情况下,我们只需要普通的wordpress主题搜索框功能。但有时会碰到一些追求完美的客户,这不,前段时间就有这样一位客户,要求在wordpress主题搜索框中输入时,要在输入框下显示对应的关键词列表,并且要求被输入的字符在下拉列表中显示为红色。那么如何才能让WordPress主题在搜索框输入时显示下拉关键词列表?

这肯定需要JS来实现了。当然,网上这方面的JS插件也是非常多的。但是需要自己去修改里的代码,这样比较麻烦,还不如自己来一句一句地写呢。其实,实现起耿也不是那么的难。

思路:就是在wordpress主题的搜索框中每输入一个字符时,就要触发一个事件——向数据库发送请求——搜索这个输入的字符相关的信息。

这里会用到 键盘按下弹起事件,用到ajax发送请求。不多说,按步骤来。

第一步:wordpress主题搜索框代码:

    第二步:处理下拉的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:”/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

    resLength=arr.length;
    var title = arr[i].post_title;
    title = title.replace(ss,’‘+ss+’‘);
    oli_i=$(‘

  • ‘+ title +’
  • ‘);

    $(‘#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)
    }
    });
    }else{
    $(‘#search ul’).html(”) //如果输入框的词都删除了,把获取的数据结果也清空,
    $(‘#search ul’).slideUp();
    };
    });
    //在输入框中按上下键的时候对应的每一条数据的样式要有改变,这里使用了keydown这个事件足够了
    $(‘.search-field’).keydown(function(ev){
    if(ev.keyCode==40){ //按下键时,now应该变大
    now++;
    $(‘#search ul li’).eq(now).addClass(‘current’).siblings().removeClass(‘current’)
    $(‘.search-field’).val($(‘#search ul li’).eq(now).text())
    //resLength表示的是长度,now表示的是序号,所以要用resLength-1
    if(now==resLength-1){
    now=-1; //当选择的数据已经到了最底部的时候,就要从顶部开始重新循环,所以now又回到-1
    }
    };
    if(ev.keyCode==38){
    now–; //按上键的时候,光标往上走,所以now减小
    $(‘#search ul li’).eq(now).addClass(‘current’).siblings().removeClass(‘current’);
    $(‘.search-field’).val($(‘#search ul li’).eq(now).text())
    if(now

    now=resLength-1 //当光标走到最上面的时候,再循环到底部重新往上走
    };
    };
    });
    $(‘.search-field’).blur(function(){
    $(‘#search ul’).slideUp();
    })

    第三步:ajax提交的接口:search_get.php

    //ajax 根据输入框 内容 变化,来搜索结果,展示出下拉搜索列表
    define(‘BASE_PATH’,str_replace( ‘\’ , ‘/’ , realpath(dirname(__FILE__).’/../../../’)));//获取根目录
    require(BASE_PATH.’/wp-load.php’ );
    global $wpdb;
    if($_POST[‘act’]==’dropdown_list’){
    $ss = esc_sql($_POST[‘ss’]);
    if($ss){
    $sql = “select post_title from wp_posts where post_status=’publish’ and post_title like ‘%$ss%’ limit 8”;
    $res = $wpdb->get_results($sql);
    echo json_encode($res);
    }
    }

    通过上面的三步,我们就为wordpress主题的搜索框实现了下拉列表,当我们在这个搜索框中输入时,就会在搜索框的下面展示我们正在输入的内容的相对应的下拉列表。如果你也对这样的效果感兴趣,不妨也试试吧。

    喜欢这个文章就点个赞分享给好友吧~

    扫一扫二维码,分享到微信朋友圈

    END
    相关标签

    WordPress主题


    上一篇:WordPress登录图片验证码如何通过php实现?

    下一篇:wordpress后台登录时怎样解决重定向循环问题?

    发表评论 取消回复

    猜你喜欢

    WordPress开发函数category_description()

    2021-04-06
    221
    1

    WordPress功能函数capital_P_dangit()

    2021-04-06
    178
    2

    WordPress开发函数can_edit_network()

    2021-04-06
    172
    0

    文章来源于互联网WORDPRESS教程:如何才能让WordPress主题在搜索框输入时显示下拉关键词列表?,
    阿里云服务器89元起,点击购买
    腾讯云服务器95元/年起 点击购买

    赞(0)
    未经允许不得转载:吾上云 » 如何才能让WordPress主题在搜索框输入时显示下拉关键词列表?
    分享到: 更多 (0)
    • 阿里云
      基础型云服务器

      1核CPU

      2G内存

      40G硬盘

      1M带宽

      独立IP

      分布式存储

      适合企业官网、个人站长类网站

      ¥89/1年 原价¥903.40

    • 阿里云
      超值型云服务器

      2核CPU

      4G内存

      40G硬盘

      3M带宽

      独立IP

      分布式存储

      适合企业官网、行业门户类网站

      ¥899/3年 原价¥8281

    • 阿里云
      高性能云服务器

      2核CPU

      8G内存

      40G硬盘

      5M带宽

      独立IP

      分布式存储

      适合电商、数据库等企业级应用

      ¥1399/3年¥14765

    • 腾讯云
      基础型云服务器

      1核CPU

      2G内存

      50G硬盘

      1M带宽

      独立IP

      分布式存储

      适合企业官网、个人站长类网站

      ¥95/1年 原价¥834

    • 腾讯云
      超值型云服务器

      1核CPU

      2G内存

      50G硬盘

      1M带宽

      独立IP

      分布式存储

      适合企业官网、行业门户类网站

      ¥288/3年 原价¥2502

    • 腾讯云
      高性能云服务器

      4核CPU

      8G内存

      50G硬盘

      5M带宽

      独立IP

      分布式存储

      适合电商、数据库等企业级应用

      ¥2188/3年¥13986

    • 阿里云
      基础型云服务器

      1核CPU

      2G内存

      40G硬盘

      1M带宽

      独立IP

      分布式存储

      适合企业官网、个人站长类网站

      ¥89/1年 原价¥903.40

    • 阿里云
      超值型云服务器

      2核CPU

      4G内存

      40G硬盘

      3M带宽

      独立IP

      分布式存储

      适合企业官网、行业门户类网站

      ¥899/3年 原价¥8281

    • 阿里云
      高性能云服务器

      2核CPU

      8G内存

      40G硬盘

      5M带宽

      独立IP

      分布式存储

      适合电商、数据库等企业级应用

      ¥1399/3年¥14765

    • 腾讯云
      基础型云服务器

      1核CPU

      2G内存

      50G硬盘

      1M带宽

      独立IP

      分布式存储

      适合企业官网、个人站长类网站

      ¥95/1年 原价¥834

    • 腾讯云
      超值型云服务器

      1核CPU

      2G内存

      50G硬盘

      1M带宽

      独立IP

      分布式存储

      适合企业官网、行业门户类网站

      ¥288/3年 原价¥2502

    • 腾讯云
      高性能云服务器

      4核CPU

      8G内存

      50G硬盘

      5M带宽

      独立IP

      分布式存储

      适合电商、数据库等企业级应用

      ¥2188/3年¥13986

    评论 抢沙发

    评论前必须登录!

     

    吾上云 专注服务器选购

    购买云服务器联系我们