当前位置: 代码迷 >> Java Web开发 >> 如何实现一个模糊搜索的下拉框
  详细解决方案

如何实现一个模糊搜索的下拉框

热度:5158   发布时间:2013-02-25 21:20:00.0
怎么实现一个模糊搜索的下拉框?
比如在textbox中输入“细木工板”,下拉框中能过滤显示出"细木工板1号","细木工板2号","细木工板3号"。

有没有现成的jquery代码,需要用ajax吗?

我以前都是用拼音做,比如在数据库中再新增一个字段是所有类型的汉语拼音(比如:ximugongbanyihao,ximugongbanerhao,ximugongbansanhao),只要在搜索框中输入缩写比如"xim",就能找到所有匹配这个拼音的所有类型。在java里能这样做吗?

------解决方案--------------------------------------------------------
autocomplete 就是这个方法。你也可以去web开发-javascript那个板块。有个帖子解决你问题昂。
------解决方案--------------------------------------------------------
<script type='text/javascript' src='/DwrTest/dwr/util.js'></script>
<script type='text/javascript' src='/DwrTest/dwr/interface/ProductService.js'></script>
<script type='text/javascript' src='/DwrTest/dwr/engine.js'></script>
<script type='text/javascript' src='js/jquery-1.6.2.min.js'></script>
<script type="text/javascript">
$(function(){
var divVal=$("#result");
var suggest="";
$("#name").keyup(function(){
ProductService.findByName($(this).val(),function(result){
suggest="";
//遍历组装结果
if(result!="")
{
var usersNameArray=[];
$.each(result,function(i){
usersNameArray.push(result[i].name);
if(usersNameArray.length>0&&usersNameArray[0].length>0)
{
suggest+="<div onmouseover='javascript:suggestOver(this);'";
suggest+=" onmouseout='javascript:suggestOut(this);'";
suggest+=" onclick='javascript:setSeacher(this.innerHTML);'";
suggest+=" class='suggest_link_out'>"+usersNameArray[i]+"</div>";
divVal(suggest);
document.getElementById("result").style.display="block";
}else{
document.getElementById("result").style.display="none";
}
});
}else{ //没有查到数据的时候
document.getElementById("result").style.display="none";
}

});

});
});
function suggestOver(obj)
{
obj.className="suggest_link_over";
}
function suggestOut(obj)
{
obj.className="suggest_link_out";
}
function setSeacher(obj)
{
$("#name").val(obj);
$("#result").hide();
alert("fdfdf");
$.post("findByName.action",obj,function(data){
var allVal=JSON.parse(data);
$.each(allVal,function(key,value)
{
$("#showManager table").append("<tr><td>"+value.id+"</td><td>"+value.name+"</td><td>"+value.type
+"</td><td>"+value.price+"</td><td>"+value.address+"</td><td>"+value.people+"</td>");
});
});
}
</script>
<body>
<input type="text" id="name" name="name" autocomplete="off"/> <!-- value="<s:property value='user.uname' />" onkeyup="searchSuggest()" -->
<input type="submit" id="cmdSearch" name="cmdSearch" value="搜索" />
<div id="result" style="width: 200px"></div>
<div id="showManager">
<table>
<tr>
<td>编号</td>
<td>产品名称</td>
<td>类型</td>
<td>价格</td>
<td>产地</td>
<td>主人</td>
  相关解决方案