jQuery 自動補全

代碼詳情：github.crmeb.net/u/LXT

$(function() {
 // 自動補全
var maxcount = 0;// 表示他最大的值
var thisCount =0;// 初始化他框的位置
$("body").prepend("");
$("#sele").keyup(function(even) {
 var v = even.which;
if (v == 38 || v == 40 || v == 13)// 當點擊上下鍵或者肯定鍵時阻止他傳送數據
{
  return;
}
var txt = $("#sele").val();//這裏是取得他的輸入框的值
if (txt != "") {
//拼裝數據
 $.ajax({
 url : "Birthday_autoCompletion",//從後臺取得json數據
 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 += "
" + v + "";
  maxcount++;
 });
 $("#autoTxt").html(Candidate);
 $("#autoTxt li:eq(0)").css("background", "#A8A5A5");
 //高亮對象
 $('body').highLight();
 $('body').highLight($("#sele").val());
 event.preventDefault();
  //當單擊某個ＬＩ時反映
  $("#autoTxt li").click(function(){
   $("#sele").val($("#autoTxt li:eq("+this.id+")").text());
   $("#autoTxt").html("");
   $("#autoTxt").hide();
  });
  //移動對象
  $("#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();
}
});
//當單擊ＢＯＤＹ時則隱藏搜索值
$("body").click(function(){
$("#autoTxt").html("");
$("#autoTxt").hide();
thisCount=0;
});
// 寫移動事件//上鍵３８ 下鍵４０ 肯定鍵 １３
$("body").keyup(function(even) {
var v = even.which;
if (v == 38)// 按上鍵時
{
if(thisCount!=0){//等於零時則證實不能上了。因此得到焦點
 $("#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) {// 按下鍵時
 if(thisCount     {
 $("#sele").blur();
 ++thisCount;
 $("#autoTxt li").css("background", "#FFFFFF");
 $("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");
}
 } else if (v == 13) {// 按確認鍵時
  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;
  }
  }
  });
  });
複製代碼