struts2+jquery easyui输入下拉框（combobox）
jquery ui的combobox控件是一个即可根据输入自动显示匹配的选项，又可下拉显示所有选项的下拉框(支持中文)：
web页面：
<%@ page language="java" contentType="text/html; charset=GB2312"
pageEncoding="GB2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>easyui test</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript">
function change(){
var url = "ajaxValue.action";
$.post(url,function(result,testStatus){
if(testStatus = 'success'){
if(result!=''){
alert(result);
var data = $.parseJSON(result);
$('#language').combobox('loadData',data);
}
}
});
}
function test(){
var a = $("#language").val();
alert(a);
}
</script>
</head>
<body>
<input type="button" onclick="change();" value="点击加载数据"/>
<input class="easyui-combobox" id="language" name="language"
data-options="valueField:'id',textField:'text'"/>
<input id="test" type="button" onclick="test();">
</body>
</html>
action:
package com.test.action;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class AjaxAction extends ActionSupport{
private static final long serialVersionUID = 1L;
private String result;
public String execute() throws Exception{
return SUCCESS;
}
public String getValue() throws Exception{
String result = "[{\"id\":1,\"text\":\"12345\"},{\"id\":2,\"text\":\"中文\"}]"; ServletActionContext.getResponse().setCharacterEncoding("gbk");
ServletActionContext.getResponse().setContentType("gbk");
ServletActionContext.getResponse().getWriter().print(result);
return null;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
}
最终结果：
备注：
点击测试按钮发现弹框中的值是空的，combobox的值不能使用$("#language").val()这种方式获取，正确的获取方式为:
var a = $("#language").combobox('getValue');
获取到的为id：
提交的时候需要配合隐藏框：
<input class="easyui-combobox" id="combobox" value=""
data-options="valueField:'id',textField:'text',
onSelect:function(){$('#search').val($('#combobox').combobox('getValue'));}"/>
<input id="search" name="search" value="" style="visibility: hidden;"/>
