页面
<Head>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<script type="text/javascript" src="js/jquery-1.6.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
//具体功能部分 具体每个参数的意思请看最下面的网址
<script type="text/javascript">
$(document).ready(function() {
// shopping/auto1_findGoods.action (url要得返回数据的地址)
$("#queryString").autocomplete("shopping/auto1_findGoods.action", {
matchSubset:false,
multiple: true,
width:170, //下拉的宽度
selectFirst:false,
max:10, //最多显示的个数
multipleSeparator: ' ',
dataType: 'json',
extraParams: {
queryString: function() { return $("#queryString").val(); }
},
//加入对返回的json对象进行解析的函数，函数返回一个数组
parse: function(data) {
if(data) {
var rows = [];
for(var i=0; i<data.entities.length; i++){
rows[rows.length] = {
//显示在下拉提示框中的内容
data:data.entities[i].name,
//显示在输入文本框里的内容 ,
result:data.entities[i].name
};
}
return rows;
}
},
formatItem: function(data, i, n) {
return data;
},
formatResult: function(data) {
return data;
}
});
});
//点提交按钮时提交值
function sele() {
var str = $("#queryString").val();
}
</script>
HTML 代码
<div align="center">
<b>用户搜索</b>
<form action="" method="post">
<input type="text" id="queryString" name="queryString" />
<input type="button" value="搜索" id="se" onclick="sele()"/>
</form>
</div>
Action 中代码
public class AutoAction extends HibernateDaoSupport {
private List<Object> entities; //set get
private String queryString; //set get
@SuppressWarnings("unchecked")
public String findGoods() throws UnsupportedEncodingException {
str = new String(queryString.getBytes("iso8859-1"),"utf-8");
String hql = "from Goods g where g.name like '%"+str.trim()+"%'";
entities = getHibernateTemplate().find(hql);
return "findGoods";
}
}
配置文件
<action name="auto1_*" class="autoAction" method="{1}">
<result name="findGoods" type="json">
<param name="includeProperties">
entities\[\d+\]\.id, entities\[\d+\]\.name, entities\[\d+\]\.price, entities\[\d+\]\.discount, entities\[\d+\]\.count, entities\[\d+\]\.cdate, entities\[\d+\]\.lamge, entities\[\d+\]\.status
</param>
</result>
</action>
具体还有好多属性请参考
http://wenku.baidu.com/view/863b0cf2f90f76c661371aea.html
分享到：
相关推荐
`jQuery-autocomplete` 是一个基于 jQuery 的开源插件，用于实现自动补全功能。这个插件使得在网页表单输入框中快速、高效地提供下拉建议变得简单易行，提高了用户界面的交互性和用户体验。它广泛应用于搜索引擎、...
**jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案，它极大地提升了用户体验，尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的，因此，首先需要确保在项目中引入了...
1. 引入jQuery库和jQuery-autoComplete插件的JavaScript文件。 2. 配置输入框元素，设置数据源和插件选项。 3. 初始化插件，通常在DOM加载完成后执行。 4. 调整CSS样式，使自动补全结果符合设计需求。 通过阅读和...
jQuery Autocomplete 是一个非常流行的 jQuery 插件，它为文本输入框提供了自动补全功能，极大地提升了用户体验。在 Web 应用中，尤其是在需要用户输入搜索关键词或选择特定项时，这个插件非常实用。本篇文章将深入...
《自动补全-jquery.autocomplete.js》 在Web开发中，自动补全功能是一种非常实用且常见的用户体验优化手段。它通常被应用于搜索框、表单输入等场景，能够帮助用户快速找到并选择他们想要的选项，提高输入效率。在...
而jQuery Autocomplete插件则是一个非常实用的工具，它能够帮助用户在输入框中实现自动补全功能，提高用户体验。虽然jQuery UI库中也有一个Autocomplete组件，但这里我们讨论的是一个独立且简单的jQuery ...
综上，"jQuery-Autocomplete-master"压缩包提供的实例，不仅展示了如何使用jQuery Autocomplete插件实现自动补全功能，还涵盖了本地和远程数据源的处理，对于前端开发者来说，这是一个很好的学习和实践资源。
jQuery Autocomplete插件是一个非常实用且功能丰富的jQuery扩展，主要用于实现网页表单中输入框的自动补全功能。该插件能够极大地提升用户体验，使用户在输入数据时更加便捷高效。本文档将详细解释其使用方法、参数...
`jQuery UI` 的 `Autocomplete` 插件是一款强大的自动补全功能组件，它为用户在输入框中输入文本时提供实时的建议列表，极大地提高了用户界面的交互性和效率。这个插件是基于流行的 JavaScript 库 `jQuery` 和其扩展...
**jQuery AutoComplete ...总结，jQuery AutoComplete 插件通过简单的配置和使用，可以实现强大的自动补全功能，提高用户体验。结合前端与后端接口，可以构建出高效的动态搜索功能。希望这个插件能为你的项目带来便利。
【标题】"带数据库的 jquery-autocomplete-php" 涉及到的是一个使用jQuery库实现的自动补全功能，结合PHP和MySQL数据库来提供动态搜索建议。jQuery UI的Autocomplete插件是这个功能的核心，它允许用户在输入框中输入...
综上所述，"前端项目-jquery.devbridge-autocomplete"是一个强大而灵活的前端工具，它将jQuery的便利性和自动完成的功能结合在一起，为Web开发者提供了构建高效自动补全功能的利器。无论是简单的本地数据应用，还是...
`jQuery Autocomplete` 是一个非常流行的 jQuery 插件，它为输入框提供了自动补全的功能，适用于各种 Web 应用中的搜索、填充表单等场景。这个插件能够根据用户输入的部分字符，快速显示与之匹配的数据列表，极大地...
这个资源包包含了丰富的信息和实例，可以帮助开发者更深入地理解和应用jQuery Autocomplete插件。 **1. 插件介绍** jQuery Autocomplete是jQuery UI框架的一部分，它允许在输入框中实现自动填充功能，通常用于搜索...
jQuery文本框联想补全自动完成插件是一款非常实用的前端开发工具，它可以帮助开发者在网页的输入框中实现智能联想和自动补全功能。这个插件基于JavaScript库jQuery构建，因此，使用它之前需要确保项目中已经引入了...
jQuery Autocomplete 是一个非常实用的插件，它为网页表单输入框提供了自动补全功能，极大地提升了用户体验。这个压缩包“jquery autocomplete下载.rar”包含了实现这一功能所需的基本文件，包括样式表、HTML 模板、...
**jQuery UI插件详解** ...- **Autocomplete（自动补全）**: 在输入框中提供动态的下拉建议。 ### 2. 使用jQuery UI 要使用jQuery UI，首先需要在HTML文件中引入jQuery库和jQuery UI的CSS及JS文件。例如： ```html ...
**jQuery AutoComplete 插件详解** 前端开发中，用户输入的自动补全功能是一个常见的需求，它可以提升用户体验，使得用户能够快速找到并选择所需的信息。`jQuery AutoComplete` 是一个基于 jQuery 的轻量级插件，它...
- **jquery.autocomplete.js**：这是jQuery Autocomplete插件的实现文件。它包含了处理用户输入、发送请求、渲染下拉列表等功能的JavaScript代码。你可以根据需求调整或扩展这个文件以满足个性化需求。 - **参数说明...