jQuery搜索框效果實(shí)現(xiàn)代碼(百度關(guān)鍵詞聯(lián)想)
可以實(shí)現(xiàn)關(guān)鍵詞聯(lián)想的,搜索框;集合了百度,谷歌,搜狗,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">站內(nèi)搜索</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="點(diǎn)擊搜索" name="wd" class="textb" autocomplete="off"><!--autocomplete 屏蔽輸入自動(dòng)記錄--> <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結(jié)果集樣式---------------------*/ #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;/*以上三行實(shí)現(xiàn)溢出顯示省略號(hào)*/ 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();//文檔加載完畢 搜索框獲取焦點(diǎn) 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); //選擇搜索類型按鈕被點(diǎn)擊 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();//編輯框獲取焦點(diǎn) 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"}); }); /*-----------------獲取關(guān)鍵詞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,//請求超時(shí) data:{ "wd":textb.val(), "cb":"keydata" }, success: function (json) { }, error: function (xhr) { return; } }); }); }); //打印關(guān)鍵詞 function keydata(keys){ var len=keys.s.length; var keywordbox=$("#search_bg #button_bg .keyword");//關(guān)鍵詞盒子 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);//把關(guān)鍵詞寫入關(guān)鍵詞盒子 keywordbox.animate({ height:(keywordbox.children().height()+1)*len//關(guān)鍵詞下滑效果 },100); //點(diǎn)擊候選詞匯 keywordbox.children().click(function(){ textb.val($(this).html());//選中詞匯放入輸入框 keywordbox.animate({ height:0//關(guān)鍵盒子收縮效果 },10,function(){ keywordbox.css({display:"none",height:"auto"}); keywordbox.empty();//清空盒子內(nèi)容 }); textb.focus();//輸入框獲取焦點(diǎn)*/ $("#search_bg #button_bg form").submit();//提交搜索 }); //提交按鈕獲取焦點(diǎn)后 subb.focus(function(){//提交按鈕獲取焦點(diǎn)后 keywordbox.animate({ height:0//關(guān)鍵盒子收縮效果 },10,function(){ keywordbox.css({display:"none",height:"auto"}); keywordbox.empty();//清空盒子內(nèi)容 }); }); /*textb.blur(function(){//輸入框失去焦點(diǎn)后收縮關(guān)鍵詞盒子(此方法會(huì)與點(diǎn)擊候選詞方法沖突造成失效) keywordbox.animate({ height:0//關(guān)鍵盒子收縮效果 },100,function(){ keywordbox.css({display:"none",height:"auto"}); keywordbox.empty();//清空盒子內(nèi)容 }); });*/ keywordbox.mouseleave(function(){//鼠標(biāo)離開關(guān)鍵字盒子后收縮關(guān)鍵詞盒子(取代上一個(gè)方法) keywordbox.animate({ height:0//關(guān)鍵盒子收縮效果 },100,function(){ keywordbox.css({display:"none",height:"auto"}); keywordbox.empty();//清空盒子內(nèi)容 }); }); var numspan=0;//用來指定選擇候選詞(通過方向鍵改變) textb.keydown(function(event){//如果使用回車提交時(shí),關(guān)鍵詞盒子也可以自動(dòng)收縮 if(event.which==13){ keywordbox.animate({ height:0//關(guān)鍵盒子收縮效果 },10,function(){ keywordbox.css({display:"none",height:"auto"}); keywordbox.empty();//清空盒子內(nèi)容 }); /*$("#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()); }); }
頁面效果如圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起
這篇文章主要介紹了jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起的功能,實(shí)例分析了jQuery中slideUp方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jquery實(shí)現(xiàn)九宮格大轉(zhuǎn)盤抽獎(jiǎng)
jQuery九宮格大轉(zhuǎn)盤抽獎(jiǎng)代碼網(wǎng)頁特效,點(diǎn)擊抽獎(jiǎng)按鈕開始隨機(jī)抽獎(jiǎng)選擇獎(jiǎng)品,可設(shè)置起點(diǎn)位置、獎(jiǎng)品數(shù)量、轉(zhuǎn)動(dòng)次數(shù)、中獎(jiǎng)位置參數(shù)2015-11-11jQuery設(shè)置Cookie及刪除Cookie實(shí)例分析
這篇文章主要介紹了jQuery設(shè)置Cookie及刪除Cookie的方法,結(jié)合完整實(shí)例形式分析了jQuery操作cookie的設(shè)置,獲取及刪除等操作技巧,需要的朋友可以參考下2016-04-04jQuery插件zTree實(shí)現(xiàn)清空選中第一個(gè)節(jié)點(diǎn)所有子節(jié)點(diǎn)的方法
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)清空選中第一個(gè)節(jié)點(diǎn)所有子節(jié)點(diǎn)的方法,涉及jQuery樹形插件zTree針對節(jié)點(diǎn)的遍歷與移除相關(guān)操作技巧,需要的朋友可以參考下2017-03-03一樣的table?不一樣的table(可編輯狀態(tài)table)
今天要分享的table不僅僅能顯示數(shù)據(jù),還可以對數(shù)據(jù)進(jìn)行編輯,當(dāng)鼠標(biāo)點(diǎn)擊數(shù)據(jù)時(shí)相應(yīng)的數(shù)據(jù)格就變成可編輯的狀態(tài),廢話不多說,進(jìn)入今天的主題2012-09-09Jquery插件實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼后60秒內(nèi)禁止重新獲取
這篇文章主要介紹了Jquery插件實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼后60秒內(nèi)禁止重新獲取,十分常用的功能,這里分享給大家,有需要的小伙伴參考下吧。2015-03-03用自定義圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法
下面小編就為大家?guī)硪黄米远x圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10使用jquery模擬a標(biāo)簽的click事件無法實(shí)現(xiàn)跳轉(zhuǎn)的解決
這篇文章主要給大家介紹了關(guān)于使用jquery模擬a標(biāo)簽的click事件無法實(shí)現(xiàn)跳轉(zhuǎn)的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12Jquery跨域獲得Json時(shí)invalid label錯(cuò)誤的解決辦法
這兩天用 Jquery 跨域取數(shù)據(jù)的時(shí)候,經(jīng)常碰到 invalid label 這個(gè)錯(cuò)誤,十分的郁悶,老是取不到服務(wù)器端發(fā)送回來的 json 值,一般跨域用到的兩個(gè)方法為:$.ajax 和 $.getJson2011-01-01jQuery插件實(shí)現(xiàn)靜態(tài)HTML驗(yàn)證碼校驗(yàn)
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)靜態(tài)HTML驗(yàn)證碼校驗(yàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-11-11