etmvc+jQuery EasyUI combobox实现google提示
基于JQuery easyUI combobox实现了一个类似google、百度输入框的提示,主要使用combobox的onChange事件,在onChange事件中改变url参数,重新绑定数据,代码如下:
前端HTML:
[html]
<table>
<tr>
<td>企业名称:
</td>
<td>
<select id="sel" name="memberName" class="easyui-combobox" style="width:200px;" data-options="required:true">
</select>
</td>
</tr>
</table>
前端JavaScript:
[javascript]
$(function(){
$('#sel').combobox({
//url:urlStr,
valueField:'memberName',
textField:'memberName',
onChange:function (newValue, oldValue){
if(newValue !=null){
//alert(newValue+oldValue);
var urlStr ="/ciccpsMember/member/getMemberSelectByName?name=" + encodeURIComponent(newValue);
$("#sel").combobox("reload",urlStr);
}
}
});
});
后端JAVA:
[java]
public String getMemberSelectByName() throws Exception {
String name=new String(request.getParameter("name").getBytes("ISO8859-1"), "UTF-8");
List<Member> members = Member.findAll(Member.class, "memberNameCh like ?", new Object[]{"%"+name+"%"});
List<Smember> smembers=new ArrayList<Smember>();
for(Member member: members){
Smember smember=new Smember();
smember.setId(member.getId());
smember.setMemberId(member.getId());
smember.setMemberName(member.getMemberNameCh());
smembers.add(smember);
}
String js=Json.toJson(smembers);
return js;
}
运行效果:
这里要特别注意,为消除url参数中文乱码,前端url参数使用encodeURIComponent()来进行编码,后端JAVA需使用new String(request.getParameter("name").getBytes("ISO8859-1"), "UTF-8")的方式来进行解码。
补充:web前端 , JavaScript ,