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();
                  }
              });
  • 相关阅读:
    这是一篇乖巧的草稿——vscode上传代码到代码托管平台GitHub
    性能测试基础及练习
    adb
    前端常用的设计模式
    Vue Router 路由实现原理
    XSS与CSRF区别及防范
    vue中函数的防抖节流
    axios 使用post方式传递参数,后端接受不到
    类数组转换为数组的方法
    深入理解原型,原型链的关系
  • 原文地址:https://www.cnblogs.com/lxk233/p/9041350.html
Copyright © 2011-2022 走看看