zoukankan      html  css  js  c++  java
  • 页面输入模糊数据---异步后台查询

    //键盘按下 触发事件,异步访问数据库,拿到模糊查询的数据
    <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();
                  }
              });
  • 相关阅读:
    第11章 接口与内部类
    第10章 多态
    API接口设计之token、timestamp、sign具体实现
    JDK 监控和故障处理工具
    分布式id生成方案
    SQL优化
    自定义对象存入Redis
    OAuth(开放授权)
    Hystrix使用
    Session机制详解
  • 原文地址:https://www.cnblogs.com/lxk233/p/9041350.html
Copyright © 2011-2022 走看看