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");//單個屬性的設置

});


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM