jQuery 异步模糊查询 实现下拉搜索功能

<style>
            .bdsug {
                background: none repeat scroll 0 0 #fff;
                border: 1px solid #ccc;
                box-shadow: 1px 1px 3px #ededed;
                display: none;
                position: absolute;
                width: 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");//单个属性的设置

});

转载于:https://www.cnblogs.com/lengzhijun/p/4521837.html