input+div 实现输入拼音首字母或汉字自动检索上拉列表

input+div 实现输入拼音首字母或汉字自动检索下拉列表
1.页面代码：
  <input type="hidden" id="brandId" name="product.prodBrandId" value=""/>
<input type="hidden" id="brandName" name="product.prodBrandName" value=""/>
<div  id="inputBrand" onMouseOut="d_1(this,event)"></div>
                </td>


2.js 移开事件(onMouseOut)
success: function(msg){
send_mini.empty();
send_mini.append(msg);
}
});
$.ajaxSetup({async:true});//设置ajax 同步
inputBrand.style.display="block";
hideAllSelect();
}


//显示select下拉 IE6 下弹出层上显示下拉问题
function showAllSelect(){
var selects=document.getElementsByTagName("SELECT");
for(var i=0;i <selects.length;i++){selects[i].style.visibility="visible";}
}

//隐藏select下拉 IE6 下弹出层上显示下拉问题
function hideAllSelect(){
var selects=document.getElementsByTagName("SELECT");
    for(var i=0;i <selects.length;i++){selects[i].style.visibility="hidden";}
}


function doClick(paramId,ParamName){
    if(paramId !=""){
$("#suggest13").val(ParamName);
$("#brandId").val(paramId);
$("#brandName").val(ParamName);

}else{
$("#suggest13").val("");
$("#brandId").val("");
$("#brandName").val("");
}
inputBrand.style.display="none";
showAllSelect();
}

function doOnMouseOut(){
inputBrand.style.display="none";
showAllSelect();
}
</script>


3.下拉显示内容
<#if brands?? && brands?size gt 0>
<#list brands?if_exists as brand>
<li onclick="doClick('${(brand.id)!}','${(brand.name)!}')" onMouseOver="this.className='s1'" onMouseOut="this.className='s2'">${(brand.name)}</li>
</#list>
<#else>
<li onclick="doClick('','')" onMouseOver="this.className='s1'">无记录</li>
</#if>
</ul>

4. css
引用#input_brand{
background:#F2F1D7;
border:0px solid #000000;
display:none;overflow:hidden
}
#show li.s1{ border:1px solid #ff9900; background:#EFEFDA;}

.selSearch{float:left;background:#fff;border:1px;border-left:0;overflow:auto;display:none}
.selOption{z-index:9999;position:absolute;margin-left:0px;top:227px;width:185px;
           background:#fff;border:1px solid #3e99d4;overflow:auto; height :150px;
           line-height:14px;}