首页
所有分类
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 相关文章推荐
JS动态调用方法名示例介绍
Dec 18 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
vue文件运行的方法教学
Feb 12 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
浅谈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
html标准库(1) 历史记录(1) MVCC(4) 幻读(5) ctypes(1) 经纬度(1) innoDB(3) C/C++(1) 间隙锁(2) dll(1)
You might like
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
python集合能干吗
2020/07/19 Python
lookfantastic荷兰：在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
印度尼西亚最好的小工具在线商店：Erafone.com
2019/03/26 全球购物
白俄罗斯女装和针织品网上商店：Presli.by
2019/10/13 全球购物
运动会开幕式邀请函
2014/02/03 职场文书
初中生自我鉴定
2014/02/04 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
物流专业自荐信
2014/05/23 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
党的群众路线教育实践活动对照检查材料思想汇报（党员篇）
2014/09/25 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
Java完整实现记事本代码
2022/06/16 Java/Android
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS