页面输入模糊数据---异步后台查询

//键盘按下 触发事件,异步访问数据库,拿到模糊查询的数据
<script >
    $("#shopId").on("keyup",function(e){
       var key = window.event ? e.keyCode : e.which;//解决IE和其他浏览器的兼容问题,返回键盘按键
      
        var val = $(this).val();
        if(val != "" && key != 38 && key != 40){
            $.ajax({
                 type: "POST",
                 url: "${basePath}/commissionRank/shopIDSearch.do",
                 data: {              
                     "shopId":val
                 },
                 dataType: "json",
                 success: function(data){  
                     $(".resultList").show();
                     var name_list = data.list;
                     var h="";
                     if(name_list!=null && name_list.length>0){
                         for(var i in name_list){
                             h+="<li>"+name_list[i].shopId+"</li>";
                         }
                     }
                     $(".resultList").empty().append(h);
                     $(".resultList li").eq(0).addClass("hover");
                }
             });
        }else if(key == 38){
            $(".resultList .hover").prev().addClass("hover");
            $(".resultList .hover").next().removeClass("hover");
            $("#shopId").val($(".resultList .hover").html());
         } else if(key == 40){
            $(".resultList .hover").next().addClass("hover");
            $(".resultList .hover").prev().removeClass("hover");
            $("#shopId").val($(".resultList .hover").html());
         } else{
            $(".resultList").empty().hide();
         }
      });
         $(document).on("mouseover",".resultList li",function(){
              $(this).addClass("hover");
              
          });
          $(document).on("mouseleave",".resultList li",function(){
              $(this).removeClass("hover");
          });
          $(document).on("click",".resultList li",function(){
              $("#shopId").val($(this).html());
              $(".resultList").empty().hide();
          })
          $("body").on("click",function(e){
              if(e.target.className!="resultList" && e.target.nodeName!="LI"){
                  $(".resultList").empty().hide();
              }
          });
原文地址:https://www.cnblogs.com/lxk233/p/9041350.html