package com.bpsoft.servlet;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class AutoComplete extends Action{
/**
* 返回json数据格式
*/
@Override
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
response.setContentType("application/json; charset=UTF-8");
PrintWriter out = response.getWriter();
String q = request.getParameter("q");//补全值
System.err.println(request.getParameter("limit")+"===================");//每次最多显示多少行
String value= "[{ name: \"Peter Pan\", to: \"peter@pan.de\" }," +
"{ name: \"Molly\", to: \"molly@yahoo.com\" }," +
"{ name: \"Forneria Marconi\", to: \"live@japan.jp\" }," +
"{ name: \"Master <em>Sync</em>\", to: \"205bw@samsung.com\" }," +
"{ name: \"Dr. <strong>Tech</strong> de Log\", to: \"g15@logitech.com\" }," +
"{ name: \"Don Corleone\", to: \"don@vegas.com\" }," +
"{ name: \"Mc Chick\", to: \"info@donalds.org\" }," +
"{ name: \"Donnie Darko\", to: \"dd@timeshift.info\" }," +
"{ name: \"Quake The Net\", to: \"webmaster@quakenet.org\" }," +
"{ name: \"Dr. Write\", to: \"write@writable.com\" }]";
System.out.println(value);
System.out.println(q);
out.print(value);
out.flush();
out.close();
return null;
}
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type='text/javascript' src='../js/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery.autocomplete.css" />
<script type="text/javascript">
$(function() {
function format(mail) {
return mail.name + " <" + mail.to + ">";
}
$("#email").autocomplete('../auto.do', {
multiple: false,
dataType: "json",
minChars: 2,
scroll: true,
max: 4,
//extraParams: {'selectedrow':},
scrollHeight: 100,
parse: function(data) {
return $.map(data, function(row) {
return {
data: row,
value: row.name,
result: row.name
}
});
},
formatItem: function(item) {
return format(item);
}
}).result(function(e, item){
$("#userid").val(item.to);
});
});
</script>
</head>
<body>
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete Plugin</a> Demo</h1>
<input type="text" id="userid" />
<div id="content">
<form autocomplete="off">
<p>
<label>E-Mail (remote json):</label>
<input type="text" id="email"></textarea>
</p>
<input type="submit" value="Submit" />
</form>
<a href="emails.phps">Server-side script creating the JSON data</a>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
//_uacct = "UA-2623402-1";
//urchinTracker();
</script>
</body>
</html>
中文乱码解决办法：修改jQuery。autocomplete.js中Ajax方法，将Ajax请求方式改为：post请求
$.ajax({
// try to leverage ajaxQueue plugin to abort previous requests
type:'POST',//这个就是修改地方
mode: "abort",
// limit abortion to this input
port: "autocomplete" + input.name,
dataType: options.dataType,
url: options.url,
data: $.extend({
q: lastWord(term),
limit: options.max
}, extraParams),
success: function(data) {
var parsed = options.parse && options.parse(data) || parse(data);
cache.add(term, parsed);
success(term, parsed);
}
});
分享到：
相关推荐
在本项目中，"ibatis +spring+struts2+jquery.autocomplete实现产品自动补全功能（二） 附带源码"，我们探讨的是如何整合四大技术来创建一个高效且用户友好的Web应用程序，特别是在搜索框中实现产品名称的自动补全...
jQuery Autocomplete 是一个非常实用的插件，它为网页表单输入框提供了自动补全功能，极大地提升了用户体验。这个压缩包“jquery autocomplete下载.rar”包含了实现这一功能所需的基本文件，包括样式表、HTML 模板、...
总结，jQuery UI Autocomplete插件是一个强大且灵活的工具，能够帮助开发者快速实现自动填充功能。通过理解并巧妙运用其提供的参数，可以定制出满足各种需求的搜索体验，从而提升网站或应用的用户体验。无论是在小型...
本实例围绕“jquery autoComplete+struts2+mysql5.5”这一主题，展示了如何利用jQuery的autoComplete插件，与Struts2框架以及MySQL 5.5数据库进行集成，来实现一个动态的、基于数据库查询的自动补全功能。...
jQuery Autocomplete是一款非常实用的插件，用于在输入框中实现自动补全功能。这个功能在许多网站上广泛使用，例如搜索引擎、电子商务网站的商品搜索、社交媒体的用户名提示等。jQuery库的强大结合Autocomplete插件...
jQuery Autocomplete 是一个非常流行的 jQuery 插件，它为输入框提供了自动补全的功能，极大地提升了用户在网站上的交互体验。这个插件源自于 jQuery UI 库，但也可以单独使用。在本文中，我们将深入探讨 jQuery ...
"php+jquery仿百度搜索提示框autoComplete"是一个示例项目，它利用PHP和jQuery技术实现了类似百度搜索引擎的自动补全功能。这个功能允许用户在输入关键词时，系统会实时地根据已有的数据提供匹配的建议，从而加速...
- **jQuery AutoComplete插件**：这是一个基于jQuery UI的插件，可以根据用户输入自动搜索和过滤选项，从而帮助用户从预设列表中快速选择合适的项。 #### 实现原理 实现搜索框输入提示功能的核心在于使用JQuery捕获...
jQuery AutoComplete 是一个非常流行的前端插件，它为输入框提供了自动补全的功能，极大地提升了用户在网页上的输入体验。这个插件基于 jQuery 库，因此，使用前需要先引入 jQuery。AutoComplete 的主要功能是根据...
用java实现autocomplete搜索功能，可以获取除输入框的其它动态参数，后台字符串拼接，返回json数据，格式如下： { query:'Li', suggestions:['Liberia', 'Libyan Arab Jamahiriya', 'Liechtenstein', 'Lithuania'...
jQuery Autocomplete.js 插件是提高网页表单输入效率的好帮手，通过与Ajax的结合，能够轻松实现动态数据的自动补全功能。在实际开发中，可以根据具体需求灵活配置和扩展，以满足各种复杂场景。记得在使用过程中注意...
jQuery Autocomplete是一个流行的UI功能，它提供了自动补全输入框的功能，而DWR则是一种在浏览器和服务器之间进行异步通信的技术。 首先，让我们详细了解一下jQuery Autocomplete。这是一个jQuery插件，它允许用户...
jQuery AutoComplete 是一个非常流行的 jQuery 插件，它为输入框提供了自动补全功能，能够极大地提升用户体验。这个插件基于 jQuery 库，因此需要先引入 jQuery 才能使用。在本文中，我们将深入探讨如何在项目中集成...
`jQuery autocomplete` 是jQuery UI库中的一个组件，它为输入框提供了自动完成的功能，能够根据用户输入的文本动态地从服务器获取并显示建议的匹配项。这个功能对于提高用户体验，特别是处理大量数据时，如搜索或者...
jQuery Autocomplete是一款非常实用的JavaScript插件，它允许用户在输入框中输入文字时，根据已有的数据集动态提供补全建议。这个功能在许多Web应用中被广泛使用，如搜索框、表单输入等。在给定的“jquery ...
在IT行业中，jQuery Autocomplete是一个常用的插件，用于实现类似于搜索引擎的自动补全功能。它为用户提供了方便快捷的输入体验，尤其适用于大型数据集的筛选。本项目以"jQuery Autocomplete 仿百度搜索 只能搜索...
`jQuery AutoComplete` 是一个非常流行的 JavaScript 库，它扩展了 jQuery UI 框架，为输入框提供自动补全功能。这个组件广泛应用于网页表单，尤其是在用户需要输入搜索关键词或者选择列表中的某一项时，能够极大地...
jQuery plugin: Autocomplete 参数及实例 官网：jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自：http://www.cnblogs.com/duanhuajian/p/3398904.html
1，本示例是基于微软拼音类库的jquery.autocomplete自动拼音首字母匹配搜索实现，解决了多音字匹配问题。 2，由于用了Linq查询，所以至少需要.NET Framework 3.5。 4，由于jquery匹配时的match项和result项来自不同...
**jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案，它极大地提升了用户体验，尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的，因此，首先需要确保在项目中引入了...