index.jsp 页面
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简单自动完成</title>
<!-- jQuery UI 样式文件 -->
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" />
<!-- jQuery 基础脚本库 -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- jQuery UI 所有插件脚本库 -->
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
//调用 autocomplete 控件
$("#tags").autocomplete({
minLength : 2,//最少 2 个字符才现提示
delay : 1000,//1秒后再出现提示
source : function(request, response) {
//通过 request.term 获得输入的值（term 为默认参数名），response([Array])用来呈现远程数据
$.post("demo.jsp", "term=" + request.term, function(data) {
//把数据返回的数据转成 JSON 对象
var result = $.parseJSON(data);
response(result);//输出返回结果
});
},
//得到焦点就显示
focus : function(e, ui) {
$("#info").text(ui.item.value);
}
});
});
</script>
</head>
<body>
查询：
<input id="tags" type="text" />
<span id="info"></span>
</body>
</html>
demo.jsp 页面
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<%
request.setCharacterEncoding("GBK");
String query = request.getParameter("term");//获取要匹配的参数
String[] source = { "ActionScript", "AppleScript", "Asp", "BASIC",
"C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang",
"Fortran", "Groovy", "Haskell", "Java", "JavaScript",
"Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" };
StringBuffer buffer = new StringBuffer("[");
//遍历目标数组，返回符合条件的结果
for (int i = 0; i < source.length; i++) {
if (null != query) {
//忽略大小写比较
if (source[i].toLowerCase().startsWith(query.toLowerCase())) {
buffer.append("{\"label\":\"" + source[i] + "\"},");
}
}
}
String result = buffer.toString();
//去掉最后面的逗号
if (result.endsWith(",")) {
result = result.substring(0, result.length() - 1);
}
result += "]";
//输出到浏览器
out.print(result);
//输出到控制台[{"label":"ActionScript"},{"label":"AcXXX"}]
System.out.print(result);
%>
效果图：
