jQuery搜索框效果实现代码(百度关键词联想)
更新时间:2021年02月25日 14:59:03 作者:WuLex
这篇文章主要介绍了jQuery搜索框效果实现代码,百度关键词联想,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
可以实现关键词联想的,搜索框;集合了百度,谷歌,搜狗,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()); }); }
页面效果如图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
这篇文章主要介绍了jQuery插件zTree实现清空选中第一个节点所有子节点的方法,涉及jQuery树形插件zTree针对节点的遍历与移除相关操作技巧,需要的朋友可以参考下2017-03-03一样的table?不一样的table(可编辑状态table)
今天要分享的table不仅仅能显示数据,还可以对数据进行编辑,当鼠标点击数据时相应的数据格就变成可编辑的状态,废话不多说,进入今天的主题2012-09-09用自定义图片代替原生checkbox实现全选,删除以及提交的方法
下面小编就为大家带来一篇用自定义图片代替原生checkbox实现全选,删除以及提交的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-10-10使用jquery模拟a标签的click事件无法实现跳转的解决
这篇文章主要给大家介绍了关于使用jquery模拟a标签的click事件无法实现跳转的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2018-12-12Jquery跨域获得Json时invalid label错误的解决办法
这两天用 Jquery 跨域取数据的时候,经常碰到 invalid label 这个错误,十分的郁闷,老是取不到服务器端发送回来的 json 值,一般跨域用到的两个方法为:$.ajax 和 $.getJson2011-01-01
最新评论