首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onFebruary 25, 2021

可以实现关键词联想的，搜索框；集合了百度，谷歌，搜狗，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搜索框效果实现代码(百度关键词联想)
jQuery搜索框效果实现代码(百度关键词联想)
jQuery搜索框效果实现代码(百度关键词联想)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

WuLex

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
浅谈js中test()函数在正则中的使用
Aug 19 #Javascript
javascript设计模式Constructor（构造器）模式
Aug 19 #Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 #Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 #Javascript
AngularJS入门教程之更多模板详解
Aug 19 #Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 #Javascript
JS获取当前页面名称的简单实例
Aug 19 #Javascript
松下(1) PL660(1) SRF-S84(1) 森海(1) S2000(3) 南麂列岛(1) 根德(2) SRF-S83(1) 台湾(1) MX500(1)
You might like
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
JS如何实现在页面上快速定位（锚点跳转问题）
2017/08/14 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
微信上传视频文件提示（推荐）
2018/11/22 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
Python中的一些陷阱与技巧小结
2015/07/10 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
新西兰最大的品牌运动鞋购物网站：Platypus NZ
2017/10/27 全球购物
英国太阳镜品牌：Taylor Morris Eyewear
2018/04/18 全球购物
为娇小女性量身打造：Petite Studio
2018/11/01 全球购物
如何安装ruby on rails
2014/02/09 面试题
客房主管岗位职责
2013/12/09 职场文书
司机辞职报告范文
2014/01/20 职场文书
入职担保书怎么写
2014/05/12 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
给朋友的道歉短信
2015/05/12 职场文书
九年级英语教学反思
2016/02/15 职场文书
django上传文件的三种方式
2021/04/29 Python