<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="<%=basePath%>"> <title>My JSP 'MyJsp.jsp' starting page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="datePicker/WdatePicker.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.autocomplete.js"></script> <link rel="Stylesheet" type="text/css" href="css/jquery.autocomplete.css"/><script type="text/javascript"> $().ready(function() { $("#staffCode").autocomplete("baseinfo/autocomplete.action",{ minChars: 1, //最小显示条数 max: 15, //最大显示条数//scroll: true,//最多可以显示150个结果 autoFill: false, dataType : "json", //指定数据类型的渲染方式 extraParams:{ staffCode:function(){ return $("#staffCode").val();//url的参数传递 } }, parse: function(data){ var rows = []; var d = data; for(var i=0; i<d.length; i++){ rows[rows.length] = { data:d[i], value:d[i], result:d[i].staffCode }; } return rows; }, formatItem: function(row,i,n) { return row.staffCode+""+row.staffStaffName; } }).result (function(event, data, formatted) { $("#staffId").val(data.staffPid); $("#staffStaffName").val(data.staffStaffName); }); $("#staffStaffName").autocomplete("baseinfo/autocomplete.action",{ minChars: 1, max: 15, autoFill: false, dataType : "json", extraParams:{ staffStaffName:function(){ return $("#staffStaffName").val(); } }, parse: function(data){ var rows = []; var d = data; for(var i=0; i<d.length; i++){ rows[rows.length] = { data:d[i], value:d[i], result:d[i].staffStaffName }; } return rows; }, formatItem: function(row,i,n) { return row.staffStaffName+""+row.staffCode; } }).result (function(event, data, formatted) { $("#staffId").val(data.staffPid); $("#staffCode").val(data.staffCode); }); });</script> </head> <body><br/><br/><br/> <input type="text" onClick="WdatePicker()"> <font color=red><- 点我弹出日期控件</font><br/> <input type="hidden" name="staffPid" id="staffId"/> 工号：<input type="text" id="staffCode"/> 姓名：<input type="text" id="staffStaffName"/> </body></html>
程序：
/** * 自动补全 * @return * @throws Exception */ public String autocomplete() throws Exception { HttpServletResponse response = ServletActionContext.getResponse(); List<Staff> staffs = null; String n = request.getParameter("staffStaffName"); if (BaseUtil.isEmpty(getStaffCode())) { staffs = staffService.findByPropertyauto("staffCode", getStaffCode().trim()); } if (BaseUtil.isEmpty(n)) { String name = new String(n.getBytes("ISO-8859-1"),"UTF-8"); staffs = staffService.findByPropertyauto("staffStaffName", name.trim()); } if (BaseUtil.isEmptyList(staffs)) { List<AutoStaff> autoStaffs = new ArrayList<AutoStaff>(); for (Staff staff : staffs) { autoStaffs.add(new AutoStaff(staff.getStaffPid(), staff.getStaffCode(), staff.getStaffStaffName())); } Gson gson = new Gson(); String result = gson.toJson(autoStaffs); response.setContentType("text/json;charset=utf-8"); response.setHeader("Chache=Control", "no-cache"); PrintWriter outWriter = response.getWriter(); outWriter.print(result); outWriter.flush(); outWriter.close(); } return SUCCESS; }
struts.xml：
<action name="autocomplete" class="com.fms.web.action.baseinfo.StaffManageAction" method="autocomplete"> <interceptor-ref name="permissionStack"/> <result type="json"> <param name="root">result</param> </result> </action>
web控制层struts2
<input type="hidden" name="staffPid" id="staffId"/> 工号：<input type="text" id="staffCode"/> 姓名：<input type="text" id="staffStaffName"/>
通过工号的自动补全可获取staffCode、staffStaffName、staffPid（隐藏Id），
通过姓名的自动补全可获取也可以获取staffCode、staffStaffName、staffPid（隐藏Id）。
巧妙的应用在于：
.result (function(event, data, formatted) { $("#staffId").val(data.staffPid); $("#staffCode").val(data.staffCode); });
.result (function(event, data, formatted) { $("#staffId").val(data.staffPid); $("#staffStaffName").val(data.staffStaffName); });
一看就明白怎么回事了，就不多说了。
中文问题也一并解决了：
String n = request.getParameter("staffStaffName");
String name = new String(n.getBytes("ISO-8859-1"),"UTF-8");
至于页面的编码统一一下就可以了。
分享到：
相关推荐
`jquery.autocomplete.js`是jQuery的一个插件，它扩展了原生的jQuery库，增加了自动完成的功能。这个插件主要由两个核心部分组成：一个是前端展示部分，负责渲染和展示联想结果；另一个是数据处理部分，用于获取和...
**jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件，它为HTML输入框提供了自动补全功能，极大地提升了用户体验。这个插件基于jQuery库，结合Ajax技术，能够实时从服务器获取...
首先，`jquery.autocomplete.js`是jQuery Autocomplete插件的核心JavaScript文件，它提供了一套完整的事件驱动机制和接口，用于处理用户输入时的实时匹配和显示建议。这个插件基于jQuery框架，意味着它能够很好地与...
一般情况下，需要引入`jquery.js`，`ui.core.js`，`ui.widget.js`以及`ui.autocomplete.js`。 2. **HTML结构**：在HTML中创建一个`<input>`元素，用于用户输入，并为其指定一个唯一的ID，这将是插件绑定的目标元素...
首先，让我们明确一下标题中的“jquery.autocomplete.js”——这是一个基于jQuery库的Autocomplete插件，它的主要功能是为HTML文本输入框添加自动完成的功能。它通过动态加载数据并根据用户输入的内容进行匹配，从而...
在jQuery库中，有一个名为`jquery.autocomplete.js`的插件，它提供了实现这一功能的强大工具。 首先，`jquery.autocomplete.js`是基于jQuery框架的，因此使用该插件前需要确保页面已经引入了jQuery库。jQuery是一个...
`jQuery.autocomplete.js` 是一个流行的JavaScript库jQuery的扩展插件，主要用于实现输入框的自动补全功能。这个插件极大地增强了用户在网页上的交互体验，尤其在处理大量可选项时，用户可以通过输入部分文字快速...
这个类包“jquery.autocomplete.zip”包含了实现这一功能所需的两个核心文件：`jquery.autocomplete.css`和`jquery.autocomplete.min.js`，它们一起为开发者构建自动补全搜索框提供了强大的支持。 首先，我们来了解...
本教程将详细介绍如何结合Jquery.AutoComplete插件和微软的ChineseConverter.dll库，实现在网页上进行汉字、拼音和简拼的模糊搜索功能。 首先，Jquery.AutoComplete是jQuery UI库中的一个组件，它能为输入框添加...
`jQuery Autocomplete` 是一个非常流行的 jQuery 插件，用于实现自动完成（或下拉建议）功能。在网页表单中，它能够为用户提供快速输入建议，提高用户体验。这个"jquery.autocomplete干净demo"提供了一个简洁且功能...
同时，为了美观和布局，还需要引入 `jquery.autocomplete.css` 文件，该文件定义了插件的样式规则。 ### 2. 使用方法 要在网页上使用 `jQuery Autocomplete`，首先需要选择一个输入元素，并为其添加 `autocomplete...
在这个场景中，我们有两个关键文件：`jquery.autocomplete.css` 和 `jquery.autocomplete.min.js`。 1. **`jquery.autocomplete.css`**： 这个文件是 CSS 样式表，负责定义 `jQuery.autocomplete` 插件的外观和...
- **jquery.autocomplete.css**：这是插件的样式表文件，定义了 Autocomplete 功能的外观，包括建议列表的样式、高亮选中项的样式等。通过自定义这个 CSS 文件，我们可以调整补全提示的显示效果，使其更好地融入...
`jQuery.autocomplete`是jQuery UI库中的一个组件，它为输入框提供了自动补全功能，极大地提升了用户体验。这个组件能够从服务器或者本地数据源获取数据，并在用户输入时动态显示匹配项。在某些情况下，我们可能需要...
jQuery.Autocomplete 是一款广泛使用的 jQuery 插件，它为网页中的输入框提供了自动完成（autocomplete）和建议提示（input suggest）功能。这款插件通过 AJAX 方式动态加载数据，使得用户在输入过程中可以接收到...
《jQuery Autocomplete 插件参数使用详解》 在Web开发中，为了提升用户体验，自动填充（Autocomplete）功能被广泛应用于搜索框、表单输入等场景。jQuery库提供了一个强大的Autocomplete插件，名为jQuery UI ...
`jquery.autocomplete.js`是jQuery UI的一部分，提供了一个自动补全功能。当用户在输入框中键入字符时，该插件可以实时搜索数据库或其他数据源，展示匹配的建议列表，帮助用户快速完成输入。这对于搜索框、地址输入...