jQuery 自動補全

xybw 9年前發布 | 21K 次閱讀 JavaScript jQuery

$(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();
      //當單擊某個LI時反映
      $("#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時則隱藏搜索值
 $("body").click(function(){
  $("#autoTxt").html("");
  $("#autoTxt").hide();
  thisCount=0;
 });
 // 寫移動事件//上鍵38 下鍵40 確定鍵 13
 $("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;
     }
   }
 });
});

 本文由用戶 xybw 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!