Jquery搜索框效果(百度关键词联想)

最新推荐文章于 2024-04-25 20:22:26 发布
最新推荐文章于 2024-04-25 20:22:26 发布
阅读量8.8k 收藏 20
点赞数 7
分类专栏： Jquery及其组件 文章标签： jquery 搜索 html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WuLex/article/details/52245342
版权

可以实现关键词联想的，搜索框；集合了百度，谷歌，搜狗，360，腾讯等多家搜索

search.html的代码：

<!doctype html>
<html>
    <head>
        <title>搜索框例子</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="./js/jquery-2.1.3.min.js"></script>

        <script type="text/javascript" src="./js/keyword.js"></script>

        <link href="./css/search.css" rel="stylesheet" type="text/css">
        <style type="text/css">
         *{margin:0 auto}

        </style>
    </head>
    <body>
        <!--start search-->
            <div id="search_bg" style="margin-top:20px;margin-bottom:20px;">
                <div id="button_bg">
                    <div class="seach_type">
                        <span class="type">站内搜索</span>
                        <span class="type">百度搜索</span>
                        <span class="type">360搜索</span>
                        <span class="type">腾讯搜索</span>
                        <span class="type">搜狗搜索</span>
                        <span class="type">谷歌搜索</span>
                    </div>
                    <span class="changetype"></span>
                    <form action="http://www.baidu.com/s" method="GET" target="_blank"  >
                        <input type="text" value="" x-webkit-speech="" lang="zh-CN" placeholder="点击搜索" name="wd" class="textb" autocomplete="off"><!--autocomplete 屏蔽输入自动记录-->
                        <input type="submit" name="sub" value="百度一下" class="subb">
                    </form>
                    <div class="keyword"></div>
                </div>
            </div>
        <!--end start-->
    </body>
</html>

search.css的代码如下:

/*---------------------搜索框样式-------------------------------*/
#search_bg{
    width: 960px;
    height:50px;
}

#search_bg #button_bg .seach_type{
    display: block;
    width: 80px;
    height: auto;
    padding: 0px;
    border: solid 1px rgba(204,204,204,0.5);
    position: absolute;
    top:45px;
    left: 20px;
    display: none;
    z-index: 21;
}
#search_bg #button_bg .seach_type .type{
    display: block;
    width: 80px;
    height: 26px;
    background: rgba(255,255,255,0.3);
    border-bottom:dashed 1px #cccccc;
    text-align: center;
    line-height:26px;
    cursor: pointer;
}
#search_bg #button_bg .seach_type .type:hover{
    color: #126AC1;
}
#search_bg #button_bg .changetype{
    display: block;
    width: 8px;
    height: 12px;
    position: absolute;
    top:20px;
    left: 30px;
    cursor: pointer;
    background: url(../images/class_1_16_1.png);
}
#search_bg #button_bg{
    width:600px;
    height: 50px;

    position: relative;
}
#search_bg #button_bg .textb{
    display: block;
    width: 400px;
    height: 36px;
    outline: none;
    background: none;
    border:solid 1px #CCCCCC;
    float:left;
    margin-top:5px;
    margin-left:20px;
    text-align: left;
    text-indent: 20px;
    font-size: 15px;

}
#search_bg #button_bg .subb{
    display: block;
    width: 80px;
    height: 40px;
    outline: none;
    border: none;
    background: #1F76CB;
    float: left;
    margin-top:5px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(28,116,203,0.5);
    color: #ffffff;
    font-size: 15px;
    text-shadow:0 1px 2px rgba(245,247,250,0.2);
}
#search_bg #button_bg .textb:focus{
    border:solid 1px #1F76CB;
}
#search_bg #button_bg .subb:hover{
    box-shadow: 0 1px 3px rgba(28,116,203,1);
}
#search_bg #button_bg .keyword{
    width: 400px;
    height: auto;
    border:solid 1px #cccccc;
    border-top:none;
    position: absolute;
    top:45px;
    left:20px;
    z-index:40;
    box-shadow: 1px 2px 2px rgba(5,5,5,0.1);
    display: none;
}
#search_bg #button_bg .keyword span{
    display: block;
    clear: both;
    width: 400px;
    height: 30px;
    text-indent:15px;
    line-height: 30px;
    cursor: pointer;
    background: rgba(255,255,255,0.3);
    border-bottom:dashed 1px #cccccc;
}
#search_bg #button_bg .keyword span:hover{
    background: rgba(0,0,0,0.5);
}

/*------------------seach结果集样式---------------------*/

#search_result{
width: 960px;
height: auto;
min-height: 400px;
overflow: hidden;
}
#search_result .result_num{
width: 960px;
height: 26px;
text-align: left;
text-indent: 15px;
font-size: 15px;
line-height: 26px;
color:#767676;

}
#search_result .result{
width: 960px;
height: auto;
max-height: 110px;
margin-top:15px;
margin-bottom: 15px;
padding-top: 15px;
padding-bottom: 15px;
text-indent: 20px;
line-height: 25px;
color: #333333;
text-overflow: ellipsis;
overflow: hidden;/*以上三行实现溢出显示省略号*/
border-bottom:dashed 1px #cccccc;
}
#result_page{
    width: 960px;
    height: 30px;
}
#result_page a{
    display: block;
    float: left;
    margin-left:5px;
    width: 30px;
    height: 30px;
    text-align: center;
    text-decoration: none;
    line-height: 30px;
    background: none;
    color: #363636;
    border:solid 1px #A5A5A5;
    transition:all .5s linear;
    -webkit-transition: al.5s linear;/* Safari and Chrome or liebao*/
    -moz-transition: all .5s linear;/*Firefox */
    -o-transition: all .5s linear;/*Opera */
    -ms-transition: all .5s linear;/*for ie*/
}
#result_page a:hover{
    color:#0A67C1;
    border:solid 1px #0A67C1;
}
#result_page .nowpage{
    border:solid 1px #EAE8E8;
    color:#0F9512;
}
#result_page .previous,
#result_page .next{
    width: 80px;
    height: 30px;
}

keyword.js的代码如下:

$(document).ready(function(){
    /*--------------------搜索框样式控制js------------------------*/
    var checktype=$("#search_bg #button_bg .changetype");
    var type=$("#search_bg #button_bg .seach_type .type");
    var seach_type=$("#search_bg #button_bg .seach_type");
    var form=$("#search_bg #button_bg form");
    var textb=$("#search_bg #button_bg form .textb");
    var subb=$("#search_bg #button_bg form .subb");
    var tbcolor="#126AC1";
    textb.focus();//文档加载完毕 搜索框获取焦点
    var search_types={
        "types":[{name:"wd",action:"./search.php",value:"搜索本站",subcolor:"#126AC1",stype:"./images/sanjiao_03.png"},
                 {name:"wd",action:"http://www.baidu.com/s",value:"百度一下",subcolor:"#126AC1",stype:"./images/sanjiao_03.png"},
                 {name:"q",action:"http://www.so.com/s",value:"360搜索",subcolor:"#53C920",stype:"./images/sanjiao_04.png"},
                 {name:"w",action:"http://www.soso.com/q",value:"腾讯搜索",subcolor:"#760AAA",stype:"./images/sanjiao_05.png"},
                 {name:"query",action:"http://www.xuan369.com/so/qqkk8.jsp",value:"搜狗搜索",subcolor:"#F94F1B",stype:"./images/sanjiao_06.png"},
                 {name:"q",action:"http://209.85.228.42/search",value:"谷歌搜索",subcolor:"#29C971",stype:"./images/sanjiao_07.png"}
                ]};
    //alert(search_types.types[1].value);
    //选择搜索类型按钮被点击
    checktype.click(function(){
        seach_type.css({"display":"block",height:0});
        seach_type.animate({
            height:(type.height()+1)*type.length,
        },500);

    });

    type.click(function(){
        //alert(search_types.types[$(this).index()].value)
        form.attr("action",search_types.types[$(this).index()].action);//改变表单提交位置
        textb.attr("name",search_types.types[$(this).index()].name);//改变表单变量名
        subb.val(search_types.types[$(this).index()].value);//改变按钮显示
        subb.css({background:search_types.types[$(this).index()].subcolor});//改变按钮颜色
        tbcolor=search_types.types[$(this).index()].subcolor;//改变输入框边框颜色
        checktype.css({"background":"url("+search_types.types[$(this).index()].stype+")"});
        subb.css({"box-shadow":"0 1px 2px "+search_types.types[$(this).index()].subcolor});
        textb.focus();//编辑框获取焦点
        seach_type.animate({
            height:0,
        },500,function(){
            seach_type.css({"display":"none",height:0});
        });
    });

    seach_type.mouseleave(function(){
        seach_type.animate({
            height:0,
        },500,function(){
            seach_type.css({"display":"none",height:0});
        });
    });
    textb.focus(function(){
        textb.css({border:"solid 1px "+tbcolor});
        //
        seach_type.animate({
            height:0,
        },500,function(){
            seach_type.css({"display":"none",height:0});
        });
    });
    textb.blur(function(){
        textb.css({border:"solid 1px "+"#CCCCCC"});
    });
    /*-----------------获取关键词js---------------------*/
    var textb=$("#search_bg #button_bg form .textb");
    textb.keyup(function(event){
        if(textb.val()==""||textb.val()==" "){
            return;
        }
        if(event.which!=39&&event.which!=40&&event.which!=37&&event.which!=38&&event.which!=13)
        $.ajax({
            url:"http://suggestion.baidu.com/su",
            type:"GET",
            dataType:"jsonp",
            jsonp: 'jsoncallback',
            async: false,
            timeout: 5000,//请求超时
            data:{
                "wd":textb.val(),
                "cb":"keydata"
            },
            success: function (json) {
            },
            error: function (xhr) {
                return;
            }

        });
    });

});
//打印关键词
function keydata(keys){
        var len=keys.s.length;
        var keywordbox=$("#search_bg #button_bg .keyword");//关键词盒子
        var textb=$("#search_bg #button_bg form .textb");
        var subb=$("#search_bg #button_bg form .subb");
        if(len==0){
            keywordbox.css({display:"none"});
        }else{
            keywordbox.css({display:"block"});
        }
        var spans="";
        for(var i=0;i<len;i++)
        {
            spans+="<span>"+keys.s[i]+"</span>"
        }
        keywordbox.html(spans);//把关键词写入关键词盒子
        keywordbox.animate({
            height:(keywordbox.children().height()+1)*len//关键词下滑效果
        },100);
        //点击候选词汇
        keywordbox.children().click(function(){
            textb.val($(this).html());//选中词汇放入输入框

            keywordbox.animate({
                height:0//关键盒子收缩效果
            },10,function(){
                keywordbox.css({display:"none",height:"auto"});
                keywordbox.empty();//清空盒子内容
            });

            textb.focus();//输入框获取焦点*/
            $("#search_bg #button_bg form").submit();//提交搜索
        });

        //提交按钮获取焦点后
        subb.focus(function(){//提交按钮获取焦点后
            keywordbox.animate({
                height:0//关键盒子收缩效果
            },10,function(){
                keywordbox.css({display:"none",height:"auto"});
                keywordbox.empty();//清空盒子内容
            });
        });

        /*textb.blur(function(){//输入框失去焦点后收缩关键词盒子(此方法会与点击候选词方法冲突造成失效)
            keywordbox.animate({
                height:0//关键盒子收缩效果
            },100,function(){
                keywordbox.css({display:"none",height:"auto"});
                keywordbox.empty();//清空盒子内容
            });
        });*/
        keywordbox.mouseleave(function(){//鼠标离开关键字盒子后收缩关键词盒子（取代上一个方法）
            keywordbox.animate({
                height:0//关键盒子收缩效果
            },100,function(){
                keywordbox.css({display:"none",height:"auto"});
                keywordbox.empty();//清空盒子内容
            });
        });
        var numspan=0;//用来指定选择候选词（通过方向键改变）
        textb.keydown(function(event){//如果使用回车提交时，关键词盒子也可以自动收缩
            if(event.which==13){
                keywordbox.animate({
                height:0//关键盒子收缩效果
                },10,function(){
                    keywordbox.css({display:"none",height:"auto"});
                    keywordbox.empty();//清空盒子内容
                });
                /*$("#search_bg #button_bg form").submit(function(){
                    return false;//阻止提交
                });*/
                /*$("#search_bg #button_bg form").submit(function(e){
                    e.preventDefault();//阻止提交方法2
                });*/
            }
            //按下下方向键
            if(event.which==40){

                if(numspan==len)
                    numspan=0;
                for(var i=0;i<len;i++){
                    if(numspan==i){
                        keywordbox.children().eq(i).css({
                            "background-color":"rgba(0,0,0,0.3)"
                        });
                    }else{
                        keywordbox.children().eq(i).css({
                            "background-color":"rgba(255,255,255,0.3)"
                        });
                    }
                }
                textb.val(keywordbox.children().eq(numspan).html());
                numspan++;
            }
            //按下上方向键
            if(event.which==38){

                numspan--;
                if(numspan==len)
                    numspan=0;
                for(var i=0;i<len;i++){
                    if(numspan==i){
                        keywordbox.children().eq(i).css({
                            "background-color":"rgba(0,0,0,0.3)"
                        });
                    }else{
                        keywordbox.children().eq(i).css({
                            "background-color":"rgba(255,255,255,0.3)"
                        });
                    }
                }
                textb.val(keywordbox.children().eq(numspan).html());

            }
        });
        keywordbox.children().mouseover(function(){
            numspan=$(this).index();
            for(var i=0;i<len;i++){
                    if(numspan==i){
                        keywordbox.children().eq(i).css({
                            "background-color":"rgba(0,0,0,0.3)"
                        });
                    }else{
                        keywordbox.children().eq(i).css({
                            "background-color":"rgba(255,255,255,0.3)"
                        });
                    }
                }
                textb.val(keywordbox.children().eq(numspan).html());
        });

}

页面效果如图:

这里写图片描述
这里写图片描述
这里写图片描述

风神.NET
关注
  • 7
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jquery搜索框效果实现方法
10-24
主要介绍了jquery搜索框效果实现方法,分析了jquery搜索框效果的实现技巧及注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
javascript搜索框联想搜索_jquery实现联想词搜索框和搜索结果分页的示例
weixin_31009269的博客
12-23 331
index.htmdemoem{font-style:normal;color: red;font-weight: bold}$(function(){$('.isearchSug').bind('keypress',function(event){if(event.keyCode == "13"){doSearch();}});});function page(page_id){var tota...
jQuery实现筛选框联想词条功能(两种方法实现)
Alfred_tfk的博客
09-02 500
jQuery实现筛选框联想词条功能(两种方法实现) css <style> li { list-style: none; } </style> html <body> 关键字:<input type="text" /> <ul> </ul> </body> script <script> $(function() { //将数组内容显示到ul var data =
关键字的联想查询
elmer_one的博客
06-29 2643
一、项目概述 1、项目需求描述： 所谓关键字的联想查询，就是当我们在输入框中输入关键字，就能出现一些含有关键字的匹配项，可供我们参考与选择。 2、所需要的技术： (1) 前端：html+css+javaScript+jQuery+ajax (2) 后端：servlet+DBCP+Jackson+mybatis (3) DB: mySql 3、所使用的工具：IDEA+sqlyog+tomcat 二、项目结构 ##### 三、环境搭建 根据上述所采用的结构，是一个比较基础的三层架构实现模式。 1、新建一个Ja
微信小程序input输入框关键字自动联想及关键字高亮
weixin_42826294的博客
06-11 5133
找了好多博客都没有找到关于小程序，模糊查询，自动联想，和关键字高亮显示的文章，没办法，自己造吧。 本文采用的是动态联想，即在input框中输入关键字后，将关键字作为条件去数据库查询，然后将所有查询结果以json格式返回给小程序的js文件，最后用关键字去匹配返回结果，并将结果中的关键字高亮显示。具体效果如下图所示： 不说其他废话了，直接上干货： js文件 // pages/search/search.js Page({ data: { // 模糊查询时长 timer: 0, //
百度搜索联想功能（jquery）
majunzhu的博客
05-13 4339
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="content-type" content=&quo
获取百度关键词联想API
南通SEO
11-02 5023
获取百度关键词联想API   向百度发请求，属于跨域资源请求，不能直接使用AJAX获取了，百度支持的请求方式是JSONP   以下是API地址： https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=加油&amp;json=1...
jQuery搜索框效果实现代码(百度关键词联想)
10-21
主要介绍了jQuery搜索框效果实现代码，百度关键词联想，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery下拉搜索框显示热门关键词
06-10
类似于等大型网站的下拉搜索框一样，鼠标点击搜索框后，底部弹出下拉菜单，显示当前关键词搜索量最高的前十名，并在右侧响应显示搜索次数，效果很不错。
基于jquery的仿百度搜索框效果代码
01-15
基于jquery的类似百度的输入框，有简单的样式
利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果
09-03
利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果，主要运用css的border属性来实现三角形，jQuery实现切换和选中的效果：
ASP做出百度输入框关键字联想的效果V2012.01
01-12
万能的ASP能否做出百度输入框关键字联想的效果? 希望大家共同研究 源代码是从网友wdyllff修改来的，我添加了数据库，修改了 部分代码，现已能输入关键字正常搜索，但有乱码BUG 希望ASP爱好者共同完善。 测试关键字“装”、“装试”、“装试分厂” ---2012.1.12-----------------西安--QQ 353908666
jquery实现搜索及时联想
07-27
jquery实现搜索及时联想，简单实用，快捷方便
jQuery文本框自动联想补全特效(边输入边搜索)
09-28
jQuery文本框自动联想补全特效(边输入边搜索) ：$(document).ready(function(){ $('#search-form').autocomplete({ hints: proposals, width: 300, height: 30, onSubmit: function(text){ $('#message').html('Selected: ' + text + ''); } }); });
Web前端开发之HTML_3
zx1026409886的博客
04-23 887
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
HTML
最新发布
2401_83693610的博客
04-25 739
分为前端（html、css、js）和后端（php、mysql、Java），前端是看到的内容，由前端人员开发。但网页的固定结构叫做整体、头部、标题、主体... 2.网页中的结构是通过特定的HTML标签进行描述。浏览器：是网页显示、运行的平台，是前端开发必备利器。常见的浏览器包括：IE、火狐浏览器（Firefox）、谷歌（chrome）、Safari浏览器、Opera（欧朋）。三、1.html的概念：专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。
HTML中的页面可见性
小卡酷谋的博客
04-22 371
所以，所谓页面可见性，就是获取当前页面的可见状态。因为对于用户来讲可以打开好多标签页面来回切换，然而始终只有一个页面处于显示状态。所以我们可以通过页面可见性（Page Visibility）API 来判断当前页面是显示状态还是隐藏状态。页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。长期以来一直缺少一个判断用户是否正在浏览某个指定标签页的方法。里页面可见性接口就提供给了程序员一个方法，让他们使用。用户是否去看别的网站了？更多有关页面可见性的内容可以参阅。"页面切换了~目前不可见"
jquery百度搜索效果
04-03
However, I can suggest some resources that might help you achieve the jQuery search effect: 1. jQuery UI Autocomplete: This is a feature-rich autocomplete plugin that can be easily customized to ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值