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");//单个属性的设置
});