首页 > wordpress CMS主题制作 > 怎样让wordpress主题搜索框输入时就显示下拉关键词列表?

怎样让wordpress主题搜索框输入时就显示下拉关键词列表?

作者: 分类:wordpress CMS主题制作 点击: 14,351 次

    正常情况下,我们只需要普通的wordpress主题搜索框功能。但有时会碰到一些追求完美的客户,这不,前段时间就有这样一位客户,要求在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)
               }
           });
       }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<-1){
               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主题的搜索框实现了下拉列表,当我们在这个搜索框中输入时,就会在搜索框的下面展示我们正在输入的内容的相对应的下拉列表。如果你也对这样的效果感兴趣,不妨也试试吧。



文章作者:码不停蹄
本文地址:https://wanlimm.com/77201904267315.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

上一篇:
下一篇:

或许你会感兴趣的文章:

8条回应:“怎样让wordpress主题搜索框输入时就显示下拉关键词列表?”

  1. avatar huge说道:

    需要这样的文章,学习了

  2. avatar ZT说道:

    想问下第二步的JS代码,是需要新建个JS文件吗?还是放在哪个文件里

  3. avatar strom说道:

    积分积分积分积分积分积分积分积分积分积分积分积分积分积分积分积分积分

  4. avatar hemao741说道:

    正需要学习这样的文章

  5. avatar shilei说道:

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201504303383.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

  6. avatar qq215294775说道:

    good我需要积分 wordpress 主题制作开发视频教程

  7. avatar xiaomim说道:

    有没有办法实现wordpress的标签自动使用标签ID作为标签的别名呢。

    比如这个标签的名词虽然是“明星”,正常来说如果不是设置的别名,那么别名就是默认的“明星”,但这样显然对SEO不好,毕竟是中文的URL,如果想改成英文URL,还是去编辑标签,手动设置别名,我想实现的效果是,不管我标签是什么内容,别名都是统一使用标签的ID作为别名,或者给标签ID加上一个固定的词。

    比如标签是:明星 标签的别名是 t01 ,这里的t是我们自己固定的词,01是明星这个标签的ID

    不知道这样的效果是否容易实现。

    谢谢!

  8. avatar jnwajy说道:

    写的挺详细的写的挺详细的写的挺详细的

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.