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();
      //当单击某个ＬＩ时反映
      $("#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;
     }
   }
 });
});

标签： 搜索

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。