? ? ? 效果和百度差不多 示括，由于是個(gè)demo我就沒(méi)有使用數(shù)據(jù)庫(kù)优训，真正的做法應(yīng)該是在數(shù)據(jù)庫(kù)有一張關(guān)鍵字表淋昭。當(dāng)用戶輸入關(guān)鍵字后使用ajax技術(shù)到服務(wù)器模糊查詢到與用戶輸入的關(guān)鍵字開(kāi)頭的數(shù)據(jù)慎式，返回填充到下拉框顯示，用戶通過(guò)鼠標(biāo)或上下鍵可以選擇關(guān)鍵字填充到搜索框澈蟆，如果數(shù)據(jù)庫(kù)中沒(méi)有這關(guān)鍵字墨辛，在用戶點(diǎn)擊搜索時(shí)一并將此關(guān)鍵詞存入數(shù)據(jù)庫(kù)，供其他用戶訪問(wèn)時(shí)候能聯(lián)想趴俘，如果有關(guān)鍵字那就給他訪問(wèn)量++ ?睹簇，在顯示關(guān)鍵字列表時(shí)候能按照人氣排行下來(lái)奏赘，比如寶強(qiáng)哥出軌時(shí)候百度輸入個(gè)寶寶下面全是與他開(kāi)頭的糗事。太惠。哈哈磨淌，廢話不多說(shuō)了：
后端代碼用list模仿了個(gè)數(shù)據(jù)庫(kù)，先看效果圖：
省略get and set.............................................
js代碼
$(function() {
$(".key-value").keyup(function(){
//拿到輸入框值
var keyValue = $(".key-value").val();
//如果用戶輸入空或正在按選擇鍵那就不用發(fā)送請(qǐng)求
if(keyValue==""||event.keyCode==38||event.keyCode==40){
//不用發(fā)送請(qǐng)求 什么也不干
}
else{
//否則發(fā)送ajax請(qǐng)求
var url = "key_findKey.action";
var data = {"keyWord":keyValue};//拿到要傳送的數(shù)據(jù)
$(".index").val(0);//定義索引為0? 主要對(duì)后期選項(xiàng)判斷進(jìn)行位置定位
$.post(url,data,function(data){//發(fā)送請(qǐng)求啦
if(data.length>0){//如果有返回?cái)?shù)據(jù) 就處理啊
$("select").show();//顯示下拉框var arrKeys = data.split(",");$("[name='keyList']").attr("size",arrKeys.length-1);//設(shè)置下拉框的大小就是數(shù)據(jù)的條數(shù)$(".keys-size").val(arrKeys.length-1);//最大的數(shù)據(jù)位置var html = "";for(var i =0;i"+arrKeys[i]+"";
}
$("select").html(html);//拼接成選線列表填充到select中
$("option").click(function(){//單擊選項(xiàng)列表將單擊的值放入搜索框
$(".key-value").val($(this).val());
$("select").hide();//放入之后隱藏
// submit();提交
});
}else{
//如果返回?cái)?shù)據(jù)為空就繼續(xù)隱藏著哦凿渊！
$("select").hide();
}
});
}
//按下上下鍵可以選下拉框中的內(nèi)容填充到搜索框
if(event.keyCode==40||event.keyCode==38){//當(dāng)按上 或下時(shí)觸發(fā)
var index = $(".index").val();//默認(rèn)選中第一個(gè)? 得到隱藏表單索引值
if(index>=$(".keys-size").val()){//如果索引值大于數(shù)據(jù)的最后一條位置
index=$(".keys-size").val();//就讓他等于數(shù)據(jù)的最大值? 也就是選中最后一條? 不至于溢出
}
if(index<1){//
index=0;
}
if(index==1){//表明移入表單? 就不用選中了
$($(".select-option")[0]).removeAttr("selected");
}if(event.keyCode==40){//按下 下鍵
$($(".select-option")[index]).attr("selected","selected");//選中該選中的列表
index++;//
$(".index").val(index);//記錄索引值
$(".key-value").val($("select").val());//讓搜索框值等于當(dāng)前選中的值
}else if(event.keyCode==38){//按下上件? 上移動(dòng)
$($(".select-option")[index-2]).attr("selected","selected");
index--;
$(".index").val(index);//記錄索引值
$(".key-value").val($("select").val());//讓搜索框值等于當(dāng)前選中的值
}
}
});
});
html代碼
