如何实现一个模糊搜索的下拉框
日期：2014-05-17 浏览次数：20934 次
怎么实现一个模糊搜索的下拉框？
比如在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.html(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>
比如在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.html(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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
