zoukankan      html  css  js  c++  java
  • jQuery 异步模糊查询 实现下拉搜索功能

    <style>
                .bdsug {
                    background: none repeat scroll 0 0 #fff;
                    border: 1px solid #ccc;
                    box-shadow: 1px 1px 3px #ededed;
                    display: none;
                    position: absolute;
                    538px;
                    z-index: 1;
                }
    </style>

    供应商:<input name="isResult" id="isResult" type="hidden" />
                     <input name="companyname" id="companyname" value="" />
                     <div id="isShowCompanyName" ></div>
                     <div  class="bdsug" style="height: auto;" id="showCompanyname"></div> <br/>

    var timer="";
    //异步模糊查询供应商
    $("#companyname").keyup(function(){
        clearTimeout(timer);
        $("#showCompanyname").empty();
        var companyname = $("#companyname").val();
        //alert(companyname);
        if(companyname){
        
        timer = setTimeout(function(){
            $.ajax({
                   url: "<%=request.getContextPath() %>/initSkuAction!likeClient.action",
                   type: "POST",
                      data : { "companyname":companyname },
                   async:true,
                   dataType:"json",
                   success:function(data){
                       if(data&&data.list&&data.list.length){
                           var $ul =$("<ul></ul>");
                           for(var i=0;i<data.list.length;i++){    
                               var $li = $("<li></li>");
                               $li.text(data.list[i].companyName);
                               $ul.append($li);
                              
                           }
                           $("#showCompanyname").append($ul).show();

                           $("ul li").each(function(){
                                 $(this).click(function(){
                                      $("#companyname").val($(this).text());
                                     $("#showCompanyname").hide();
                                     $("#isResult").val(1);
                                 });
                             });


                       }else{
                       $("#isResult").val(0);
                       }
                   }
                });},500);
            }else{
                $("#isResult").val(0);
                $("#showCompanyname").hide();
            }
        }).blur(function(){
            if($("#isResult").val){
                $(this).val("");
            }
        });
        
        

    $("body").click(function(){
        $("#showCompanyname").attr("style", "display:none");//单个属性的设置

    });

  • 相关阅读:
    对scrapy经典框架爬虫原理的理解
    js的处理技巧
    网站登陆的两种方法
    scrapy批量下载图片
    [转]解决scrapy下载图片时相对路径转绝对路径的问题
    scrapy爬取西刺网站ip
    logging的使用方法
    scrapy中的response
    scrapy中的request
    scrapy.Spider的属性和方法
  • 原文地址:https://www.cnblogs.com/lengzhijun/p/4521837.html
Copyright © 2011-2022 走看看