基于jquery實(shí)現(xiàn)的自動(dòng)補(bǔ)全功能
本文實(shí)例講述了基于jquery實(shí)現(xiàn)的自動(dòng)補(bǔ)全功能的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
$(function() {
// 自動(dòng)補(bǔ)全
var maxcount = 0;// 表示他最大的值
var thisCount =0;// 初始化他框的位置
$("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; position: absolute;' id='autoTxt'></div>");
$("#sele").keyup(function(even) {
var v = even.which;
if (v == 38 || v == 40 || v == 13)// 當(dāng)點(diǎn)擊上下鍵或者確定鍵時(shí)阻止他傳送數(shù)據(jù)
{
return;
}
var txt = $("#sele").val();//這里是取得他的輸入框的值
if (txt != "") {
//拼裝數(shù)據(jù)
$.ajax({
url : "Birthday_autoCompletion",//從后臺(tái)取得json數(shù)據(jù)
type : "post",
dataType : "json",
data : {"bir.userName" : txt
},
success : function(ls) {
var offset = $("#sele").offset();
$("#autoTxt").show();
$("#autoTxt").css("top", (offset.top + 30) + "px");
$("#autoTxt").css("left", offset.left + "px");
var Candidate = "";
maxcount = 0;//再重新得值
$.each(ls, function(k, v) {
Candidate += "<li id='" +maxcount+ "'>" + v + "</li>";
maxcount++;
});
$("#autoTxt").html(Candidate);
$("#autoTxt li:eq(0)").css("background", "#A8A5A5");
//高亮對(duì)象
$('body').highLight();
$('body').highLight($("#sele").val());
event.preventDefault();
//當(dāng)單擊某個(gè)LI時(shí)反映
$("#autoTxt li").click(function(){
$("#sele").val($("#autoTxt li:eq("+this.id+")").text());
$("#autoTxt").html("");
$("#autoTxt").hide();
});
//移動(dòng)對(duì)象
$("#autoTxt li").hover(function(){
$("#autoTxt li").css("background", "#FFFFFF");
$("#autoTxt li:eq("+this.id+")").css("background", "#A8A5A5");
thisCount=this.id;},function(){
$("#autoTxt li").css("background", "#FFFFFF");});
},
error : function() {
$("#autoTxt").html("");
$("#autoTxt").hide();
maxcount = 0;
}
});
} else {
$("#autoTxt").hide();
maxcount = 0;
$("#sestart").click();
}
});
//當(dāng)單擊BODY時(shí)則隱藏搜索值
$("body").click(function(){
$("#autoTxt").html("");
$("#autoTxt").hide();
thisCount=0;
});
// 寫(xiě)移動(dòng)事件//上鍵38 下鍵40 確定鍵 13
$("body").keyup(function(even) {
var v = even.which;
if (v == 38)// 按上鍵時(shí)
{
if(thisCount!=0){//等于零時(shí)則證明不能上了。所以獲得焦點(diǎn)
$("#sele").blur();
if(thisCount>0)
--thisCount;
else
thisCount=0;
$("#autoTxt li").css("background", "#FFFFFF");
$("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");
}else{$("#sele").focus();}
} else if (v == 40) {// 按下鍵時(shí)
if(thisCount<maxcount-1)
{
$("#sele").blur();
++thisCount;
$("#autoTxt li").css("background", "#FFFFFF");
$("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");
}
} else if (v == 13) {// 按確認(rèn)鍵時(shí)
var tt=$("#"+thisCount).text();
if(tt!="")
{
$("#sele").val(tt);
$("#autoTxt").html("");
$("#autoTxt").hide();
}else
{
if($("#sele").val()!="")
$("#sestart").click();
}
} else {
if($("#autoTxt").html()!="")
{
$("#sele").focus();
thisCount=0;
}
}
});
});
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果
- jQuery實(shí)現(xiàn)Email郵箱地址自動(dòng)補(bǔ)全功能代碼
- jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動(dòng)補(bǔ)全下拉提示功能
- 使用jquery實(shí)現(xiàn)仿百度自動(dòng)補(bǔ)全特效
- jquery實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全功能示例分享
- PHP+jQuery實(shí)現(xiàn)自動(dòng)補(bǔ)全功能源碼
- jQuery 插件autocomplete自動(dòng)完成應(yīng)用(自動(dòng)補(bǔ)全)(asp.net后臺(tái))
- jquery實(shí)現(xiàn)仿JqueryUi可拖動(dòng)的DIV實(shí)例
- jqueryUI里拖拽排序示例分析
- jQueryUI寫(xiě)一個(gè)調(diào)整分類的拖放效果實(shí)現(xiàn)代碼
- jQueryUI如何自定義組件實(shí)現(xiàn)代碼
- jQueryUI的Dialog的簡(jiǎn)單封裝
- 詳解jQuery UI庫(kù)中文本輸入自動(dòng)補(bǔ)全功能的用法
相關(guān)文章
jQuery中serializeArray()與serialize()的區(qū)別實(shí)例分析
這篇文章主要介紹了jQuery中serializeArray()與serialize()的區(qū)別,結(jié)合實(shí)例形式分析了jQuery中serializeArray()與serialize()的具體功能、使用技巧與用法區(qū)別,需要的朋友可以參考下2015-12-12jQuery判斷當(dāng)前點(diǎn)擊的是第幾個(gè)li的代碼
jQuery中如何判斷當(dāng)前點(diǎn)擊的是第幾個(gè)li,使用$(this).index()取得li的下標(biāo),下面的示例,大家可以看看2014-09-09jquery pagination分頁(yè)插件使用詳解(后臺(tái)struts2)
這篇文章主要為大家詳細(xì)介紹了jquery pagination 分頁(yè)插件的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01Jquery模仿Baidu、Google搜索時(shí)自動(dòng)補(bǔ)充搜索結(jié)果提示
昨天研究了一下Jquery 模仿Baidu、Google收索時(shí)自動(dòng)補(bǔ)充收索結(jié)果的提示,感覺(jué)效果還行,下面與大家分享下代碼2013-12-12解決攔截器對(duì)ajax請(qǐng)求的攔截實(shí)例詳解
這篇文章主要介紹了解決攔截器對(duì)ajax請(qǐng)求的攔截實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-12-12