页面
<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
分享到：
相关推荐
1.该js支持jquery的自动补全功能 2.因为jquery-ui是jquery的插件，所以部分版本jquery可能不支持该插件，建议换成内附的jquery.js 3.如有疑惑，请阅读内附的说明文档
jquery自动补全插件（jquery autocomplete） 内包含使用说明，前台+后台
jquery 文本框 自动补全 ajax autocomplete 完整实例
包括新增的demo示例，以及官方文档的解说，方法说明，主要是ajax请求自动补全的示例
layui自动填充插件,使用教程配合https://www.cnblogs.com/aeolian/p/11993836.html#autoid-6-0-0
利用jquery.autocomplete.js插件实现了文本框自动补全的功能， 附件包含两个实例代码，均以txt文档显示，都有前台和后台代码。一个是传一个参数，一个是传两个参数，后台以一般处理程序ashx文件编写。大家只需要修改...
[ jquery.autocomplete ]jquery的自动完成/补全插件(很好很强大) 谁用谁知道
运用jquery.autocomplete.js 和jquery.autocomplete.css实现文本框自动补全，直接下载可以看到运行效果，带注释
style.css几个文件，访问的是数据库，返回的是json数据，json格式已经在index.html中，文本框下来智能选择补全，jquery.ui.js中已经包含了jquery.autocomplete.js源码，不在需要单独引用jquery.autocomplete.js文件
jQuery自动补全自动提示插件仿百度自动提示插件
jquery autoComplete插件，文字自动补全demo1
js-autocomplete-cookie 输入框自动补全 + 记录搜索缓存 输入框自动补全功能并实现与PHP交互，点击选中行后记录当前数据到本地cookie，同时可以跳转页面。 功能点： 输入框输入数值之后自动取服务端数据。 当...
输入文字，自动联想库中的内容，自动补全，关键字高亮
项目中有时会用到自动补全查询，就像Google搜索框、淘宝商品搜索功能，输入汉字或字母，则以该汉字或字母开头的相关条目会显示出来供用户选择， autocomplete插件就是完成这样的功能。 autocomplete官网 ： ...
autocomplete官网 ： http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ （可下载jQuery autocomplete插件）。 淘宝商品搜索功能 效果： 下面来使用 autocomplete插件来实现类似效果。1. 创建 ...
NULL 博文链接：https://zhuhong7000-gmail-com.iteye.com/blog/1399012
仿照google自动补全，jQuery是近段时间里比较流行的一个JavaScript框架，不断有使用者开发出新的 jQuery插件。下面收集了50个开发者最喜欢使用的jQuery插件。
仿百度输入自动补全源码 ...使用的是Jquery的一个名叫 jquery.ui.autocomplete.js的插件做的。 后台只要返回 json格式的数据即可。 首先需要创建测试数据，使用sqlserver创建数据库，新建表添加数据。
jquery的一个自动补全插件，里面有demo在线演示地址和在线api地址
这就是贴代码的坏处之一：搜索框快被网友玩儿坏了！！！...而且好像还在玩儿，随他们去吧，只要...接触到的自动补全插件主要有两个：autocomplete和typeahead。本站使用的是typeahead. jQueryUI-Autocomplete 自动补全插