最近项目中用到一个根据用户输入的字符，从后台获取相关数据下拉展示的文本框。上网找了资料发现用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();

}

}

相关脚本下载地址：http://download.csdn.net/detail/xsmlearn/4988282