一个ajax做的联想查询文本框

最近项目中用到一个根据用户输入的字符，从后台获取相关数据下拉展示的文本框。上网找了资料发现用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',this,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.youkuaiyun.com/detail/xsmlearn/4988282