安科网

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

86403563

86403563

2016-08-19

关注 关注

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

86403563

86403563

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

有限数据量如何最大化提升模型效果？百度工程师构建数据增强服务

在AI模型开发的过程中，许多开发者被不够充足的训练数据挡住了提升模型效果的脚步，一个拥有出色效果的深度学习模型，支撑它的通常是一个庞大的标注数据集。因此，提升模型的效果的通用方法是增加数据的数量和多样性。但在实践中，收集数目庞大的高质量数据并不容易，在某些

wujun 2020-08-17

8 百度360搜索关键词提交

"""百度搜索关键词提交""". kv = {‘wd‘: ‘keyword‘}

jtguve 2020-06-04

百度小程序-接入自然搜索-API提交Url-c#开发

开发百度小程序后，接下来，人们最想做的是让百度更多的录入自家内容。因为小程序资源被索引后，才可能在搜索结果中展现。第一种是用已有的H5网站资源替换，这种的录入速度应该非常快速，百度小程序平台将优先对 H5站点下的 TOP 流量 URL进行替换处理。提交新资

zmosquito 2020-02-15

Vue项目引用百度地图并实现搜索定位等功能

点此 试试在线操作！前往 百度地图开放平台控制台 ，登录百度账号，创建应用即得。参考百度地图 逆地址解析 示例demo，封装一个逆地址解析函数，供下面的功能调用。

worldkun 2020-01-06

记录一下网盘搜索网站

　　这几天下载HEVC的测试序列，百度必应搜好久，都不全，忽然想起百度盘里肯定有，还真找到了。

worldkun 2019-12-24

安装centos6.10时，安装完成重启报错error 15,file not found

在百度上搜索到进grub编辑，可还是无法解决问题，仍然file not found；后来我将服务器硬盘格式化了，然后再正常安装系统，结果就能正常启动了，稀里糊涂的就解决了；

furongwei 2019-12-14

我想搜索“区块链”，百度却把我送进了资金盘

日前，有投资者向一本区块链爆料称，自己在百度搜索“区块链”一词，排在搜索结果第二位的，就是一个资金盘项目。它们瞄准的，主要是二三四线城市用户。这些地方历来是各类传销诈骗的重灾区，加之当地用户对区块链了解不深，很容易掉入陷阱。10月25日，国家领导人的一席讲

冯泰 2019-11-07

百度搜索结果跳转URL代码规律分析

实际上根本来说，是百度对于用户体验的加强!打击点击器就是为了更好地让优质的网站展现给用户，跟360综合搜索区别，禁止360抓取也是为了体现百度的品牌效应，从这两点来说对用户是有利的!

nextwhy 2012-09-09

怎么用百度升级Windows 10正式版？ 搜索即得

在今晚刚刚结束的Windows 10发布会上微软宣布百度成为继腾讯和360之后又一个推广升级Windows 10的中国互联网巨头。但当时我们还不清楚具体合作形式，发布会结束后百度已经上线了相关合作信息，只需要搜索关键字或者即可体验。点击“了解详情”之后会被

Jarvan 2015-07-29

谷歌浏览器使用百度引擎跳转到百度主页的问题

设置》搜索》管理引擎

LoveJob 2014-10-08

百度/谷歌/搜狗/360搜索/新网站提交与收录入口

首先进入网站收录入口，符合要求的1个月内一般会收录。· 一个免费登录网站只需提交一页（首页），百度搜索引擎会自动收录网页。· 符合相关标准您提交的网址，会在1个月内按百度搜索引擎收录标准被处理。每次抓取网页时，Google都会将新网站添加到索引中并更新现有

linqiang 2013-06-29

搜狗搜索比百度差吗？不一定！

搜索引擎2012年第三季度搜索市场的营收份额为百度77.8%、谷歌中国13.5%、搜狗4.5%，由此可见搜狗在搜索引擎中的地位何其低下，而“初出茅庐”的360综合搜索一上线便传出占有市场10%的份额，搜狗搜索作为老牌搜索这么容易就被360综合搜索击败了，实

AIOps智能运维 2013-03-01

百度URL地址参数的分析

在搜索引擎的URL地址参数中，我们可以清晰的知道，该软件是否与搜索引擎进行了点击付费类的合作，我们以百度搜索的URL参数部分举例说明如下：。　　cl：搜索类型，cl=3为网页搜索，cl=2为图片搜索;　　ie：查询关键词的编码，缺省设置为简体中文，即ie=

magvwiz 2012-09-19

百度对拼音的识别不想你认识的那么好

虽然我们在搜索结果中能看到搜索baidu就能出现百度,搜索nihao能出现你好.但你如果输入"nihaolequ"百度给你匹配的结果会是"你好俄语".这两个是压根不相关的数据,却出现了这样的结果.相信你该会很迷惑.其

冯泰 2012-02-22

百度技术沙龙归来

先说说总体的感觉，会场不大，晚来的同学只能站着，与会者大概有两百人。分享了两个话题：一、解析移动互联网中的搜索技术。说是技术沙龙但是很少涉及技术，更多的是数据、观点和期望。

magvwiz 2011-02-22

关于百度的五大真相

很多人知道百度，不一定完完全全地了解百度，我这里就权且列五条关于百度的不良记录，权当笑谈。搜索竞价排名是我目前了解到的，多年来百度收入占比最大的一块业务，即便多次更名也丝毫没有影响到它的核心地位，如果没有竞价广告就没有今天的百度。百度的产品，除了贴吧、知道

AIOps智能运维 2011-02-12

百度地址栏的代码是什么意思(转)

大家都知道在百度框里面搜索一个关键词，会出来一大串的搜索结果，同时在地址栏也会出现一大串文字，搜索结果是什么意思这里就不多说了，分析问之的规律有助seo优化,深圳seo就和大家说说百度地址栏的代码是什么意思。在百度后面多了一个bs：上一次搜索的关键词然后后

BarryZhang 2011-02-25

浅思google和百度

看完那本关于google和百度的书了，简单的介绍了两家不同公司的起家过程、营销策略以及企业文化。看得我对google是佩服，对百度是热忱的盼望。无疑前者是搜索界的巨头，有着不可撼动的地位，百度本身的挑战就是一种勇气的表现。google始创于1995年，由两

小西0 2010-11-24

百度框,商业利益与公平的博弈

百度框计算的概念一年前就提出了，李彦宏在公开场合介绍框计算的时候举例说明，比如你在搜索框里面输入“杭州天气”，百度就会判断你需要知道最近的杭州天气情况，就直接在第一个搜索结果中把杭州未来几天的天气情况展现出来，而不是像一般搜索那样给你其他网站的链接。

deusrwvf 2010-09-06

如何把网站加入百度、google、Yahoo搜索、一搜、搜狗、中搜、爱问等搜索引擎.

如果你的网站有内容丰富，且无不良内容就可以免费加入搜索了。

deusrwvf 2010-08-17
86403563

86403563

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号