[JavaScript] jquery 自动补全 →→→→→进入此内容的聊天室

来自 , 2020-11-16, 写在 JavaScript, 查看 125 次.
URL http://www.code666.cn/view/e369853d
  1. $(function() {
  2.  // 自动补全
  3.  var maxcount = 0;// 表示他最大的值
  4.  var thisCount =0;// 初始化他框的位置
  5.  $("body").prepend("");
  6.  $("#sele").keyup(function(even) {
  7.   var v = even.which;
  8.   if (v == 38 || v == 40 || v == 13)// 当点击上下键或者确定键时阻止他传送数据
  9.    {
  10.    return;
  11.    }
  12.   var txt = $("#sele").val();//这里是取得他的输入框的值
  13.   if (txt != "") {
  14.    //拼装数据
  15.    $.ajax({
  16.     url : "Birthday_autoCompletion",//从后台取得json数据
  17.     type : "post",
  18.     dataType : "json",
  19.     data : {"bir.userName" : txt
  20.     },
  21.     success : function(ls) {
  22.      var offset = $("#sele").offset();
  23.      $("#autoTxt").show();
  24.      $("#autoTxt").css("top", (offset.top + 30) + "px");
  25.      $("#autoTxt").css("left", offset.left + "px");
  26.      var Candidate = "";
  27.       maxcount = 0;//再重新得值
  28.      $.each(ls, function(k, v) {
  29.       Candidate += "
  30. " + v + "";
  31.       maxcount++;
  32.      });
  33.      $("#autoTxt").html(Candidate);
  34.      $("#autoTxt li:eq(0)").css("background", "#A8A5A5");
  35.      //高亮对象
  36.      $('body').highLight();
  37.      $('body').highLight($("#sele").val());
  38.      event.preventDefault();
  39.       //当单击某个LI时反映
  40.       $("#autoTxt li").click(function(){
  41.        $("#sele").val($("#autoTxt li:eq("+this.id+")").text());
  42.        $("#autoTxt").html("");
  43.        $("#autoTxt").hide();
  44.       });
  45.       //移动对象
  46.       $("#autoTxt li").hover(function(){
  47.        $("#autoTxt li").css("background", "#FFFFFF");
  48.        $("#autoTxt li:eq("+this.id+")").css("background", "#A8A5A5");
  49.        thisCount=this.id;},function(){
  50.         $("#autoTxt li").css("background", "#FFFFFF");});
  51.     },
  52.     error : function() {
  53.      $("#autoTxt").html("");
  54.      $("#autoTxt").hide();
  55.      maxcount = 0;
  56.     }
  57.    });
  58.   } else {
  59.    $("#autoTxt").hide();
  60.    maxcount = 0;
  61.    $("#sestart").click();
  62.   }
  63.  });
  64.  //当单击BODY时则隐藏搜索值
  65.  $("body").click(function(){
  66.   $("#autoTxt").html("");
  67.   $("#autoTxt").hide();
  68.   thisCount=0;
  69.  });
  70.  // 写移动事件//上键38 下键40 确定键 13
  71.  $("body").keyup(function(even) {
  72.   var v = even.which;
  73.    if (v == 38)// 按上键时
  74.    {
  75.     if(thisCount!=0){//等于零时则证明不能上了。所以获得焦点
  76.      $("#sele").blur();
  77.      if(thisCount>0)
  78.       --thisCount;
  79.      else
  80.       thisCount=0;
  81.     $("#autoTxt li").css("background", "#FFFFFF");
  82.     $("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");
  83.     }else{$("#sele").focus();}
  84.    } else if (v == 40) {// 按下键时
  85.     if(thisCount     {
  86.      $("#sele").blur();
  87.      ++thisCount;
  88.      $("#autoTxt li").css("background", "#FFFFFF");
  89.      $("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");
  90.     }
  91.    } else if (v == 13) {// 按确认键时
  92.     var tt=$("#"+thisCount).text();
  93.     if(tt!="")
  94.      {
  95.       $("#sele").val(tt);
  96.       $("#autoTxt").html("");
  97.       $("#autoTxt").hide();
  98.      }else
  99.      {
  100.       if($("#sele").val()!="")
  101.       $("#sestart").click();
  102.      }
  103.    } else {
  104.     if($("#autoTxt").html()!="")
  105.      {
  106.       $("#sele").focus();
  107.       thisCount=0;
  108.      }
  109.    }
  110.  });
  111. });
  112.  

回复 "jquery 自动补全"

这儿你可以回复上面这条便签

captcha