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

1.页面代码：
 

引用

<td>
<input class="input_brand" type="text" id="suggest13" onkeyup="doViewBrand()" onfocus="doViewBrand()"  value="" size="30" autocomplete="off"/>
<input type="hidden" id="brandId" name="product.prodBrandId" value=""/>
<input type="hidden" id="brandName" name="product.prodBrandName" value=""/>
<div  id="inputBrand" class="selSearch" onMouseOut="d_1(this,event)"></div>
                </td>

2.js 移开事件(onMouseOut)

引用

<script type="text/javascript">
function d_1(obj,e){
var e = window.event || e, relatedTarget = e.toElement || e.relatedTarget;
while(relatedTarget && relatedTarget != obj)
relatedTarget = relatedTarget.parentNode;
if(!relatedTarget){
inputBrand.style.display="none";
showAllSelect();
}
}


//输入input时调用ajax 读取下拉数据列表
function doViewBrand(){
var send_mini=$("#inputBrand");
$.ajaxSetup({async:false});  //设置ajax 异步
$.ajax({
type: "post",
url: "/product/getBrandByInput.action",
data: "brand.name=" + $("#suggest13").val(),
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.下拉显示内容

引用

<ul id="show" class="selOption" >
<#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;}