JQuery EasyUI+Struts2自动匹配输入下拉框（combobox）

来源：互联网发布：java编程语言培训编辑：程序博客网时间：2024/05/29 14:23

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;"/>