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

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

}

页面效果如图:



以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-08-18

基于jquery的仿百度搜索框效果代码

先看看整个的效果图:图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DT

利用jsonp跨域调用百度js实现搜索框智能提示

项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择. 使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js. ok,了解了jsonp的原理和应用后,我们看看百度的智能提示是如何做的 在chrome的调试窗口下看看百度搜索发出的请求.当输入关键字"a",请求如图: 用firebug看下请求的参数,如图: 请求方式:get请求 请求参数:wd明显是要搜索的关键字:cb是请求

jQuery 插件仿百度搜索框智能提示(带Value值)

因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个. 直接贴代码. 复制代码 代码如下: (function($) { var timeid; var lastValue; var options; var c; var d; var t; $.fn.autoComplete = function(config) { c = $(this); var defaults = { width: c.width(), //提示框的宽度 默认跟

基于JavaScript实现百度搜索框效果

本文实例为大家分享了js实现百度搜索框展示效果的具体代码,供大家参考,具体内容如下 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; } input{

JS实现仿google、百度搜索框输入信息智能提示的实现方法

本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

使用 Vue.js 仿百度搜索框的实例代码

整理文档,搜刮出一个使用 Vue.js 仿百度搜索框的实例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue demo</title> <style type="text/css"> .bg { background: #ccc; } </style> <s

百度搜索框智能提示案例jsonp

先给大家展示下效果图: 下面一段代码给大家分享了百度搜索框智能提示案例jsonp的知识,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度下拉_sug-jquery</title> <script src="jquery-1.11.3.js"><

Servlet+Ajax实现智能搜索框智能提示功能

利用无刷新技术智能变换搜索框的提示,同百度搜索 效果图 其基本原理: 1.给搜索框编写js绑定事件onkeyup(键盘输入时).onfocus(当鼠标点击搜索框外的时候清空提示) 2.首先获得用户输入.之后将获得的数据传给服务器,服务器将数据传给后台,后台获取服务器传来的数据进行处理,得到关联数据,向前端返回json格式,前端通过回调函数,将返回来的json解析成文本,将文本传输到搜索框下方的展示窗 如下为支持json的jar包 search.jsp <%@ page language="

JavaScript实现百度搜索框效果

最近做了个百度搜索框今天给大家分享下. 效果: 1.当进入界面时,自动调用方法,获取当前的时间,并且实时更新时间. 2.点击页面头部的换肤,自动更换背景图片 3.鼠标点击搜索框的时候自动显示用户上次搜索的内容, 4.当鼠标放在用户上次搜索的内容的时候搜索框的内容变成鼠标悬浮的内容上 5.在搜索框中按回车的时候自动录入为上次输入的内容中,若本次内容和上次内容相同则不显示 6.点击百度一下按钮自动录入搜索框中的内容为上次搜索的内容 界面: 界面html代码: <!DOCTYPE html> <

使用Ajax模仿百度搜索框的自动提示功能实例

啊啊,熬夜了.今天学习了ajax给我的感觉就是,"哇塞"ajax好酷炫哦,(额...后端狗,接触到了大前端的魅力了),这么晚了还是直奔主题把.Let's go! 百度搜索提示框,我想大家都很熟悉了把,是什么样子我也就不再赘述.直接看代码 来我们写一个简陋的jsp页面 Look! 是这个样子的 下面是代码: <%@ page language="java" contentType="text/html; charset=UTF-8" page

基于Vue.js 2.0实现百度搜索框效果

使用Vue.js 2.0 模仿百度搜索框效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum

.NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路

搞了个不是局部刷新的百度搜索框下拉提示效果,在被领导批了n次后,问了n次后,弄出来了,真心感觉我这个小脑壳,太不灵光了,太懒了.记录下来,以免忘记. 大致思路:前台放一个input标签,然后当该标签内的值输入有变化的时候,调用后台代码查询 符合条件的数据绑定ListBox. 具体实现思路:一个input,当输入值变化时,调用后台代码.但是怎么调用呢,这个是个问题了,在该input下放一个隐藏的服务器控件button,隐藏该控件,当input里值变化时,调用js,在js里触发该按钮的onclick