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();
                  }
              });
  • 相关阅读:
    hdu 4947
    hdu 4946
    hdu 4944
    hdu 4942
    hdu 4941
    PAT 【L2-011 玩转二叉树】
    PAT【L2-006 树的遍历】
    XYNUOJ 【2070: 重建二叉树】
    XYNUOJ 【1367: 二叉链表存储的二叉树】
    XYNUOJ 2390【二叉树遍历2】
  • 原文地址:https://www.cnblogs.com/lxk233/p/9041350.html
Copyright © 2011-2022 走看看