<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#empCode").autocomplete("autoCompleteAction.action", {
cellSeparator: "|",
lineSeparator: "\n",
minChars: 1,//最小输入数
maxItemsToShow: 10,//最大显示条数
formatItem: function(row) {
//var obj=eval("("+row+")");//将JSON转换成对象
return "员工代码->" +row[0] + " 姓名->" +row[1]+ " 年龄:" + row[2];//显示格式，自定义
},
onItemSelect: function(li) {
$("#empName").val(li.extra[0]);
$("#age").val(li.extra[1]);
$("#orgName").val(li.extra[2]);
}
});
});
</script>
</head>
<body>
员工代码：<input type="text" name="empCode" id="empCode" size="70"><br>
姓名：<input type="text" name="empName" id="empName" readonly="readonly"><br>
年龄：<input type="text" name="age" id="age" readonly="readonly"><br>
部门：<input type="text" name="orgName" id="orgName" readonly="readonly"><br>
</body>
</html>
public class AutoCompleteAction extends ActionSupport {
private String q;//用于接收前台数据 ，必须是q不能时其他名称
private User user;
private List<User> userList;
private AutoCompleteService autoCompleteService;
/**
* @return the userList
*/
public List<User> getUserList() {
return userList;
}
/**
* @param userList the userList to set
*/
public void setUserList(List<User> userList) {
this.userList = userList;
}
/**
* @return the user
*/
public User getUser() {
return user;
}
/**
* @param user the user to set
*/
public void setUser(User user) {
this.user = user;
}
/**
* @param autoCompleteService the autoCompleteService to set
*/
public void setAutoCompleteService(AutoCompleteService autoCompleteService) {
this.autoCompleteService = autoCompleteService;
}
/**
* @return the q
*/
public String getQ() {
return q;
}
/**
* @param q the q to set
*/
public void setQ(String q) {
this.q = q;
}
@SuppressWarnings("unchecked")
public String complete() throws IOException {
userList = autoCompleteService.selectAll(q);
System.out.println(userList.size());
HttpServletResponse response=ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
for (User user : userList) {
response.getWriter().println(user.getId() + "|" + user.getUserName()+ "|" +user.getAge() + "|" + user.getAddr());
}
return null;
}
}
public class AutoCompleteDaoImpl extends HibernateDaoSupport implements AutoCompleteDao {
/**
* @param q
* @return
* @see com.acca.dao.AutoCompleteDao#selectAll(java.lang.String)
*/
@SuppressWarnings("unchecked")
@Override
public List<User> selectAll(final String q) {
return (List<User>) getHibernateTemplate().execute(new HibernateCallback() {
@Override
public Object doInHibernate(Session session) throws HibernateException, SQLException {
return session.createQuery("from User u where u.addr like ?")
.setParameter(0, ('%'+q+'%'))//注意模糊查询时注意% ，参数从0开始
.list();
}
});
}
}
分享到：
相关推荐
`jQuery-autocomplete` 是一个基于 jQuery 的开源插件，用于实现自动补全功能。这个插件使得在网页表单输入框中快速、高效地提供下拉建议变得简单易行，提高了用户界面的交互性和用户体验。它广泛应用于搜索引擎、...
虽然jQuery UI库中也有一个Autocomplete组件，但这里我们讨论的是一个独立且简单的jQuery Autocomplete插件。 **1. 安装与引入** 要使用这个插件，首先需要确保你的项目中已经引入了jQuery库。然后，你可以通过CDN...
【描述】"前端项目-jquery.devbridge-autocomplete" 提供了一个高效且可定制的解决方案，适用于任何需要自动补全功能的Web应用，例如搜索框、地址输入、产品推荐等场景。这个项目的核心是利用jQuery的事件处理和DOM...
`jQuery AutoComplete` 是一个简单易用的库，它通过监听用户的输入事件，动态地从服务器或本地数据源获取匹配的建议列表，并将这些建议以下拉菜单的形式展示给用户。这个插件的核心在于其灵活性和自定义性，可以适应...
总的来说，`jQuery UI Autocomplete`是一个强大的前端开发工具，它简化了自动补全功能的实现，让开发者能够快速构建具有专业级界面效果的应用。通过灵活的配置选项和丰富的API，你可以根据项目需求进行深度定制，为...
例如，要创建一个对话框，只需简单调用`.dialog()`方法，jQuery UI会自动处理剩下的布局、事件绑定和动画效果。 jQuery UI的组件丰富多样，例如： 1. **Dialogs** - 提供模态和非模态对话框，用于展示信息、警告或...
jQuery Autocomplete 是基于 jQuery 库的一个插件，它提供了一个简单的接口，允许开发者快速地为输入框添加自动提示功能。这个插件可以从用户输入的字符中匹配预定义的数据集，并在输入框下方显示匹配结果。它不仅...
《jQuery Autocomplete 全面解析...总之，jQuery Autocomplete 插件通过其丰富的功能和灵活的配置，为网页应用的交互性提供了强大的支持。通过深入理解并合理运用这些知识点，我们可以创建出高效、友好的自动补全体验。
综上所述，jQuery Autocomplete是一个强大且灵活的插件，通过简单的配置即可实现高效、美观的自动补全功能。了解并掌握其工作原理和配置选项，能帮助我们更好地在项目中运用这一工具，提升用户体验。
`django-autocomplete-light` 是 Django 生态系统中的一个重要组件，它提供了与各种前端技术（如 jQuery UI Autocomplete）集成的后端支持，用于创建可定制的自动完成组件。该库可以处理各种数据源，包括数据库模型...
jQuery Autocomplete 是一个强大的组件，广泛应用于网页上的输入框，可以为用户提供实时的搜索建议或自动补全功能。这个组件通过与后端服务器进行异步通信（通常使用 AJAX 技术）来获取数据源，并在用户输入时动态...
2. **选择元素**：使用jQuery选择器选取需要应用Autocomplete功能的input元素。 3. **初始化Autocomplete**：调用`$(selector).autocomplete(options)`方法初始化插件，并传入配置选项。这些选项可以包括数据源...
在网页应用中，当用户在输入框中开始键入时，Autocomplete会根据预设的数据源展示匹配的建议列表。 该组件的基本用法包括以下几个步骤： 1. **引入依赖**：首先，你需要在HTML页面中引入jQuery库、jQuery UI库以及...
《jQuery UI 1.10.4：深入理解与应用》 jQuery UI 是一个基于 jQuery JavaScript 库的强大用户界面库，提供了丰富的交互效果、可定制的主题以及多种可重用的组件。在本篇文章中，我们将深入探讨jQuery UI 1.10.4...
2. **前端友好** - 提供了与jQuery UI Autocomplete插件的集成，同时支持Bootstrap和其他前端框架。 3. **灵活的配置** - 可以配置多个自动完成字段，并通过简单的设置实现复杂逻辑。 4. **安全** - 通过内置的安全...
1. **主题**: jQuery UI 提供了多种预设的主题，允许开发者通过简单的 CSS 更改来改变界面的外观和风格，满足不同项目的需求。 2. **交互组件**: 包括拖放(Drag and Drop)、排序(Sortable)、可折叠(Foldable)等，...
jQuery库中的Autocomplete插件，通过简单易用的API，帮助开发者快速构建高效、响应式的搜索建议功能。本文将深入探讨`jquery.autocomplete.js`和`jquery.autocomplete.css`这两个核心文件，以及如何利用它们来创建一...
jQuery UI 是一个强大的前端开发库，它提供了丰富的用户界面组件，可以帮助开发者构建功能丰富的交互式网页应用。本篇将详细探讨jQuery UI中的各种模板，包括小按钮、文本框、下拉菜单以及多级下拉菜单等。 1. **小...
8. **自动完成(Autocomplete)**：在输入框中提供自动补全建议，提高用户输入效率。 为了创建自定义版本，开发者可以在jQuery UI官方网站的下载页面上选择需要的组件、主题和主题 roller。这将生成一个定制的压缩包...
jQuery UI包含了大量的UI元素，如对话框（Dialogs）、日期选择器（Datepickers）、拖放功能（Drag and Drop）、排序（Sorting）、滑块（Sliders）以及可自定义的下拉菜单（Autocomplete）。这些组件大大简化了前端...