首页
所有分类
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中 noConflict() 方法使用
Apr 25 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
js生成随机数方法和实例
Jan 17 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
基于js文件加载优化(详解)
Jan 03 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 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
泰国购物网站(30) 挪威购物网站(7) 荷兰购物网站(99) 比利时购物网站(33) 南非购物网站(8) 芬兰购物网站(10) 哥伦比亚购物网站(5) 瑞典购物网站(55) 欧洲购物网站(15) 葡萄牙购物网站(13)
You might like
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
PHP＋DBM的同学录程序(4)
2006/10/09 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
jQuery tip提示插件（实例分享）
2017/04/28 jQuery
解析Vue 2.5的Diff算法
2017/11/28 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
python检测服务器端口代码实例
2019/08/31 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
python实现简单俄罗斯方块
2020/03/13 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
python实现简单的五子棋游戏
2020/09/01 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
小学教师岗位职责
2013/11/25 职场文书
广播体操比赛口号
2014/06/10 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers