|
最近项目中用到一个根据用户输入的字符，从后台获取相关数据下拉展示的文本框。上网找了资料发现用AutoComplete实现起来比较简单，网上有一个叫“韦向阳”的帅锅，写了一个类似脚本还不错，只是下拉列表中的数据是在页面写死静态的，所以拿来做了些修改。
主要修改的部分是，
1）将原本传入js方法中的第一个参数改为访问后台的url。
<div>
供货商1：
<input
onkeyup="AutoSuggest(document.getElementById('params').value,this,event);"
style="width: 250px" autocomplete="off">
</div>
改为：
<div>
供货商1：
<input
onkeyup="AutoSuggest('${home}/weekly/queryStaffForWorkGroup.do',event);"
style="width: 250px" autocomplete="off">
</div>
2）修改autocomplete.js中的AutoSuggest方法
function autoPostBySync(url,data,fun){
$.ajax({
type: 'POST',
async:false,
url: url,
data: data,
success: fun,
dataType: 'json'
});
}
function AutoSuggest(url,input,e){
var params = "";
var id = $("#WORK_GROUP_ID").combobox("getValue");
autoPostBySync(url,{workGroupId:id},function(result){
//此处返回值类型为 “张三,李四,王五,赵六”
params = result.message;
});
var keycode = AutoComplete.prototype.isIE() ? window.event.keyCode : e.which;
if ((keycode >= 37 && keycode <= 40) || keycode == 13) {
if (autoComplete != null && (keycode == 38 || keycode == 40 || keycode == 13)) {
autoComplete.setStyle(keycode);
}
}
else {
autoComplete = new AutoComplete(params,input);
autoComplete.show();
}
}
3)效果图
相关脚本下载地址：http://download.csdn.net/detail/xsmlearn/4988282
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
