jquery的autocomplete插件实现自动补全和级联
最近有项目要实现界面中业务类型文本框能自动补全,并且业务类型文本框随着ip地址的改变而改变,即级联,级联并不复杂,难的是在autocomplete插件中实现级联,因为autocomplete只初始化第一次,后面调用初始化方法也只会在前一次的下拉选项中添加新的选项,无法实现级联,查过很多资料,网上说flexselect能够实现级联,但是flexselect对高版本1.7的jQuery不支持自动补全,所以放弃了flexselect方案,最后,这个问题经过我的多次努力终于得到了解决,希望能帮助到其他的遇到同样问题的人。
步骤:
1.引入js,css文件,样式。
<script type="text/javascript" src="js-libs/jquery/autocomplete/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="js-libs/jquery/autocomplete/css/jquery.autocomplete.css">
<style type="text/css">
.ajaxInput{
background-position: 0px center;
margin-top: 5px; padding-left: 25px;
background-image:url(theme/default/images/ajaxInput.gif);
background-repeat: no-repeat;
width:170px;
height:20px;
}
</style>
2.加入ip地址,业务类型文本框。
<th><span class="star">* </span>IP:</th>
<td><s:textfield id = "ip" name="queryform.ip" cssClass="inputs" />
<th><span class="star">* </span>业务类型:</th>
<td id="busiTypeTd"> <input type="text" id="busiType" name="queryform.busiType" class="ajaxInput" title="输入关键字进行查询,双击显示前10条记录"/>
</td>
3.js编码实现级联。
$(function(){
$('#ip').change(function(){
cu.post({
url:'perf/performance!getBusiType.action',
data:{
ip:$("#ip").val()
},
success:function(data){
$("#busiType").val('');
busiType = data;
//每次都重新生成dom对象,并初始化autocomplet控件。
var busiTypeDom = $("#busiType").clone();
$("#busiType").remove();
busiTypeDom.appendTo($("#busiTypeTd"));
$("#busiType").autocomplete(busiType,{minChars:0,cacheLength:1,matchContains:true})
.result(function(event,busiType,formatted){
});
index++;
}
});
});
});
注意:js代码中的cu.post方法是公司框架的基础方法,功能是发送ajax异步请求,可以使用jQuery的ajax方法代替。
本人第一次写博客,写得不好不要见惯,有问题可以给我留言,谢谢。
- jQuery autocomplete实现仿搜索引擎文本自动补全自动完成插件
- jQuery Autocomplete插件实现文本框内容自动匹配补全
- jQuery自动补全autocomplete插件使用,三种获取数据源方式具体实现(true)
- jquery autocomplete插件 实现输入框自动补全
- JQuery实现自动补全的插件
- java中用jquery AutoComplete 实现自动补全(二)后台JSON实现自动补全
- jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)
- 使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配
- 用jquery-ui Autocomplete一步一步实现输入自动补全
- 关于jquery的jquery.autocomplete(自动补全)插件的个人理解
- 自动补全插件 jquery.autocomplete
- jquery Autocomplete 实现自动补全(四)解决jquery 高版本不支持browser方法
- JQuery中autocomplete(自动补全)插件,遇到相同属性的input标签给其赋值
- jQuery autoComplete插件-实现自动匹配
- -_-#【jQuery插件】Autocomplete 自动补全
- jQuery autocomplete 自扩展插件、自动补全示例
- JQuery插件之autocomplete使用指南 ajax自动补全查询
- Jquery实现仿搜索引擎文本框自动补全插件
- java中用jquery AutoComplete 实现自动补全(一)简单小例子
- jquery autocomplete实现读取sql数据库自动补全TextBox