星期五, 25 三月 2011
利用JQUERY Autocomplete 插件实现自动提示输入
下载地址： http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
要在页面引用如下js库和样式表
jquery.ajaxQueue.js
jquery.autocomplete.css
jquery.autocomplete.js
jquery.bgiframe.min.js
jquery.js
thickbox-compressed.js
thickbox.css
例如
<!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="jquery/jquery.js"></script>
<script type='text/javascript' src='jquery/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='jquery/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='jquery/thickbox-compressed.js'></script>
<script type='text/javascript' src='jquery/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="jquery/thickbox.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
$().ready(function() {
$("#singleBirdRemote").autocomplete("search.jsp", {
width: 260,
selectFirst: true,
extraParams:{EP1:'一',EP2:'二'}
});
});
</script>
</head>
<body>
<form autocomplete="off">
<label>Single Bird (remote):</label>
<input type="text" id="singleBirdRemote" />
</form>
</body>
</html>
一个简单的返回结果的jsp文件
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page import="java.io.*" %>
<%@ page import="java.util.*" %>
<%@ page import="java.text.*" %>
<%@ page import="java.sql.*" %>
<%@ page import="javax.sql.*" %>
<%@ page import="javax.naming.*" %>
<%
request.setCharacterEncoding("UTF-8");
for (Enumeration names = request.getParameterNames();names.hasMoreElements();) {
String name = (String)names.nextElement();
String value = request.getParameter(name);
System.out.println(name+":"+value);
}
%>
aaa
bbb
ccc
大家好
中国人民解放军
提示：autocomplete会自动将输入框的数据发送到指定的url地址，参数名称为q。
如果需要附加其它参数，可以使用 extraParams 来指定。
要使用UTF-8编码，否则中文会出现乱码。
Posted by at 10:39 上午 in 未分类
