jQuery搜索框效果实现代码(百度关键词联想)

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

search.html的代码：

 
 
 
 

 

 
 
  *{margin:0 auto}

 
 
 
 
  
  
   
   站内搜索
   百度搜索
   360搜索
   腾讯搜索
   搜狗搜索
   谷歌搜索
   
   
   
   
  
  
 
 

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);
}



#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;
 -moz-transition: all .5s linear;
 -o-transition: all .5s linear;
 -ms-transition: all .5s linear;
}
#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(){
 
 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"});
 });
 
 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

页面效果如图:


 


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。