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

最新推荐文章于 2022-05-31 14:26:28 发布

sean-zou

最新推荐文章于 2022-05-31 14:26:28 发布

阅读量6.3k

点赞数

分类专栏： Front Page 文章标签：自动匹配下拉框 combobox

本文链接：https://blog.csdn.net/a19881029/article/details/8890343

版权

Front Page 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

sean-zou

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQuery EasyUI+Struts2自动匹配输入下拉框（combobox）

JQuery UI的combobox控件是一个即可根据输入自动显示匹配的选项，又可下拉显示所有选项的下拉框(支持中文)：web页面：&lt;%@ page language="java" contentType="text/html; charset=GB2312" pageEncoding="GB2312"%&gt;&lt;!DOCTYPE html PUBLIC "-/...
复制链接

扫一扫