jQuery搜索框效果實(shí)現(xiàn)代碼(百度關(guān)鍵詞聯(lián)想)
更新時(shí)間：2021年02月25日 14:59:03 作者：WuLex
這篇文章主要介紹了jQuery搜索框效果實(shí)現(xiàn)代碼，百度關(guān)鍵詞聯(lián)想，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
可以實(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,//請(qǐng)求超時(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)鍵詞寫(xiě)入關(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)離開(kāi)關(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;//用來(lái)指定選擇候選詞（通過(guò)方向鍵改變）
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());
});
}
頁(yè)面效果如圖:
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起
這篇文章主要介紹了jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起的功能,實(shí)例分析了jQuery中slideUp方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jquery實(shí)現(xiàn)九宮格大轉(zhuǎn)盤(pán)抽獎(jiǎng)
jQuery九宮格大轉(zhuǎn)盤(pán)抽獎(jiǎng)代碼網(wǎng)頁(yè)特效，點(diǎn)擊抽獎(jiǎng)按鈕開(kāi)始隨機(jī)抽獎(jiǎng)選擇獎(jiǎng)品，可設(shè)置起點(diǎn)位置、獎(jiǎng)品數(shù)量、轉(zhuǎn)動(dòng)次數(shù)、中獎(jiǎng)位置參數(shù)2015-11-11
jQuery設(shè)置Cookie及刪除Cookie實(shí)例分析
這篇文章主要介紹了jQuery設(shè)置Cookie及刪除Cookie的方法,結(jié)合完整實(shí)例形式分析了jQuery操作cookie的設(shè)置,獲取及刪除等操作技巧,需要的朋友可以參考下2016-04-04
jQuery插件zTree實(shí)現(xiàn)清空選中第一個(gè)節(jié)點(diǎn)所有子節(jié)點(diǎn)的方法
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)清空選中第一個(gè)節(jié)點(diǎn)所有子節(jié)點(diǎn)的方法,涉及jQuery樹(shù)形插件zTree針對(duì)節(jié)點(diǎn)的遍歷與移除相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
一樣的table？不一樣的table(可編輯狀態(tài)table)
今天要分享的table不僅僅能顯示數(shù)據(jù)，還可以對(duì)數(shù)據(jù)進(jìn)行編輯，當(dāng)鼠標(biāo)點(diǎn)擊數(shù)據(jù)時(shí)相應(yīng)的數(shù)據(jù)格就變成可編輯的狀態(tài)，廢話不多說(shuō)，進(jìn)入今天的主題2012-09-09
Jquery插件實(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ī)?lái)一篇用自定義圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
使用jquery模擬a標(biāo)簽的click事件無(wú)法實(shí)現(xiàn)跳轉(zhuǎn)的解決
這篇文章主要給大家介紹了關(guān)于使用jquery模擬a標(biāo)簽的click事件無(wú)法實(shí)現(xiàn)跳轉(zhuǎn)的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
Jquery跨域獲得Json時(shí)invalid label錯(cuò)誤的解決辦法
這兩天用 Jquery 跨域取數(shù)據(jù)的時(shí)候，經(jīng)常碰到 invalid label 這個(gè)錯(cuò)誤，十分的郁悶，老是取不到服務(wù)器端發(fā)送回來(lái)的 json 值，一般跨域用到的兩個(gè)方法為：$.ajax 和 $.getJson2011-01-01
jQuery插件實(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