Question

想请问下，我想用easyui的combobox实现 autocomplete 搜索怎么做

Answer 1

之前我和你遇到过一样的问题，不要使用onChange，使用loader，我用的是J2EE，不知道你用的是什么环境，但大体是差不多的，主要是JS和HTML部分，你可以试试：

需求：1、每输入一个字符，读取数据库查询15条近似数据2、读出数据后，按上、下键+回车键进行选择

【JavaScript】
//easyUI combobox中不要使用onChange来做读取数据库操作，有很多BUG，建议使用loader
var btsloader = function(param,success,error){

//获取输入的值
var q = param.q || "";

//此处q的length代表输入多少个字符后开始查询
if(q.length <= 0) return false;
$.ajax({
url:"<%=path%>/jsonObj/costAction_getJSONCostList",
type:"post",
data:{
//传值，还是JSON数据
searchName:q
},

//重要，如果写jsonp会报转换错误，此处不写都可以
dataType:"json",
success:function(data){

//关键步骤，遍历一个MAP对象
var items = $.map(data.rows, function(item){
return {
id:item.id,
name:item.text
};
});

//执行loader的success方法
success(items);
},

//异常处理
error:function(xml, text, msg){
error.apply(this, arguments);
}
});
};

【HTML】
<input id="costId" name="costId" class="easyui-combobox" style="width:250px;" data-options="
loader: btsloader,
mode: 'remote',
valueField: 'id',
textField: 'name'" />

【JAVA】public String getJSONCostList() throws UnsupportedEncodingException, JSONException{
List<HashMap<String, Object>> jsonArr = new ArrayList<HashMap<String, Object>>();
List<Cost> list = costService.searchCosts(0, 14, searchName);
for(Cost c: list){
HashMap<String, Object> hm = new HashMap<String, Object>();
hm.put("id", c.getId());
hm.put("text", c.getBtsName());
jsonArr.add(hm);
}
HashMap<String, Object> hm = new HashMap<String, Object>();
hm.put("rows", jsonArr);
result = JSONObject.fromObject(hm);
return "ajax";
}

【struts.xml】
<package name="jsonObj" namespace="/jsonObj" extends="json-default">
<action name="*_*" class="{1}" method="{2}">
<result name="ajax" type="json">
<param name="root">result</param>
</result>
</action>
</package>

传入的JSON Object举例： {"rows":[{"id":1,"text":"基站1"},{"id":2,"text":"基站2"}]}