dwz框架使用autoComplete自动补全
1、下载autoComplete相关的js,css文件,地址http://docs.jquery.com/Plugins/Autocomplete 。引入dwz,dwz框架引入js的页面一般为index.html,如图
2、在需要自动补全的搜索页面添加js代码
本次的思路:根据搜索框需要搜索的字段,用ajax去后台得到备选值,因为$("#XXX").autocomplete的source要求的数据为js数组,因此需要转换为数组形式
搜索框代码:
<li>
<label>交易ID:</label>
<input name="dmTradeId" type="text" maxlength="50" value="${(dmTradeId)!}" id="autocomplete" tableName="表名” refName="字段名"/>
</li>
js代码:
<script>
$(function() {
var name=document.getElementById("autocomplete").getAttribute("refName");
var tableName=document.getElementById("autocomplete").getAttribute("tableName");
var urlData="autoCompleteController/getAutoData.do?name="+name+"&tableName="+tableName;
var availableTags=new Array();
$.ajax({
url:urlData,
dataType:"json",
success:function(data){
var array=data;
$.each(array,function(index,item){
availableTags[index]=item;
});
}});
$( "#autocomplete" ).autocomplete({
source: availableTags
});
});
</script>
后台Controller代码:
后台返回list,前台需要转换为数组。
缺陷:数据