图示:
NameService service类
package service;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
public class NameService {
// 包含所有值的列表
private List<String> names = new ArrayList<String>();
public NameService() {
// 实际可以加在数据库中
names.add("Aaland Islands");
names.add("Afghanistan");
names.add("Albania");
names.add("Algeria");
names.add("American Samoa");
names.add("Andorra");
names.add("Angola");
names.add("Anguilla");
names.add("Antarctica");
names.add("Antigua And Barbuda");
names.add("Argentina");
names.add("Armenia");
names.add("Aruba");
names.add("Australia");
names.add("Austria");
names.add("Azerbaijan");
names.add("Bahamas");
names.add("Bahrain");
names.add("Bangladesh");
names.add("Barbados");
names.add("Belarus");
names.add("Belgium");
names.add("Belize");
names.add("Benin");
names.add("Bermuda");
names.add("Bhutan");
names.add("Bolivia");
names.add("Bosnia And Herzegowina");
names.add("Botswana");
names.add("Bouvet Island");
names.add("Brazil");
names.add("British Indian Ocean Territory");
names.add("Brunei Darussalam");
names.add("Bulgaria");
names.add("Burkina Faso");
names.add("Burundi");
names.add("Cambodia");
names.add("Cameroon");
names.add("Canada");
names.add("Cape Verde");
names.add("Cayman Islands");
names.add("Central African Republic");
names.add("Chad");
names.add("Chile");
names.add("China");
names.add("Christmas Island");
names.add("Cocos (Keeling) Islands");
names.add("Colombia");
names.add("Comoros");
names.add("Congo, Democratic Republic Of (Was Zaire) Cd");
names.add("Congo, Republic Of");
names.add("Cook Islands");
names.add("Costa Rica");
names.add("Cote D'ivoire");
names.add("Croatia (Local Name: Hrvatska)");
names.add("Cuba");
names.add("Cyprus");
names.add("Czech Republic");
names.add("Denmark");
names.add("Djibouti");
names.add("Dominica");
names.add("Dominican Republic");
names.add("Ecuador");
names.add("Egypt");
names.add("El Salvador");
names.add("Equatorial Guinea");
names.add("Eritrea");
names.add("Estonia");
names.add("Ethiopia");
names.add("Falkland Islands (Malvinas)");
names.add("Faroe Islands");
names.add("Fiji");
names.add("Finland");
names.add("France");
names.add("French Guiana");
names.add("French Polynesia");
names.add("French Southern Territories");
names.add("Gabon");
names.add("Gambia");
names.add("Georgia");
names.add("Germany");
names.add("Ghana");
names.add("Gibraltar");
names.add("Greece");
names.add("Greenland");
names.add("Grenada");
names.add("Guadeloupe");
names.add("Guam");
names.add("Guatemala");
names.add("Guinea");
names.add("Guinea-Bissau");
names.add("Guyana");
names.add("Haiti");
names.add("Heard And Mc Donald Islands");
names.add("Honduras");
names.add("Hong Kong");
names.add("Hungary");
names.add("Iceland");
names.add("India");
names.add("Indonesia");
names.add("Iran (Islamic Republic Of)");
names.add("Iraq");
names.add("Ireland");
names.add("Israel");
names.add("Italy");
names.add("Jamaica");
names.add("Japan");
names.add("Jordan");
names.add("Kazakhstan");
names.add("Kenya");
names.add("Kiribati");
names.add("Korea, Democratic People's Republic Of");
names.add("Korea, Republic Of");
names.add("Kuwait");
names.add("Kyrgyzstan");
names.add("Lao People's Democratic Republic");
names.add("Latvia");
names.add("Lebanon");
names.add("Lesotho");
names.add("Liberia");
names.add("Libyan Arab Jamahiriya");
names.add("Liechtenstein");
names.add("Lithuania");
names.add("Luxembourg");
names.add("Macau");
names.add("Macedonia, The Former Yugoslav Republic");
names.add("Madagascar");
names.add("Malawi");
names.add("Malaysia");
names.add("Maldives");
names.add("Mali");
names.add("Malta");
names.add("Marshall Islands");
names.add("Martinique");
names.add("Mauritania");
names.add("Mauritius");
names.add("Mayotte");
names.add("Mexico");
names.add("Micronesia, Federated States Of");
names.add("Moldova, Republic Of");
names.add("Monaco");
names.add("Mongolia");
names.add("Montserrat");
names.add("Morocco");
names.add("Mozambique");
names.add("Myanmar");
names.add("Namibia");
names.add("Nauru");
names.add("Nepal");
names.add("Netherlands");
names.add("Netherlands Antilles");
names.add("New Caledonia");
names.add("New Zealand");
names.add("Nicaragua");
names.add("Niger");
names.add("Nigeria");
names.add("Niue");
names.add("Norfolk Island");
names.add("Northern Mariana Islands");
names.add("Norway");
names.add("Oman");
names.add("Pakistan");
names.add("Palau");
names.add("Palestinian Territory, Occupied");
names.add("Panama");
names.add("Papua New Guinea");
names.add("Paraguay");
names.add("Peru");
names.add("Philippines");
names.add("Pitcairn");
names.add("Poland");
names.add("Portugal");
names.add("Puerto Rico");
names.add("Qatar");
names.add("Reunion");
names.add("Romania");
names.add("Russian Federation");
names.add("Rwanda");
names.add("Saint Helena");
names.add("Saint Kitts And Nevis");
names.add("Saint Lucia");
names.add("Saint Pierre And Miquelon");
names.add("Saint Vincent And The Grenadines");
names.add("Samoa");
names.add("San Marino");
names.add("Sao Tome And Principe");
names.add("Saudi Arabia");
names.add("Senegal");
names.add("Serbia And Montenegro");
names.add("Seychelles");
names.add("Sierra Leone");
names.add("Singapore");
names.add("Slovakia");
names.add("Slovenia");
names.add("Solomon Islands");
names.add("Somalia");
names.add("South Africa");
names.add("South Georgia And The South Sandwich Isl");
names.add("Spain");
names.add("Sri Lanka");
names.add("Sudan");
names.add("Suriname");
names.add("Svalbard And Jan Mayen Islands");
names.add("Swaziland");
names.add("Sweden");
names.add("Switzerland");
names.add("Syrian Arab Republic");
names.add("Taiwan");
names.add("Tajikistan ");
names.add("Tanzania, United Republic Of");
names.add("Thailand");
names.add("Timor-Leste");
names.add("Togo");
names.add("Tokelau");
names.add("Tonga");
names.add("Trinidad And Tobago");
names.add("Tunisia");
names.add("Turkey");
names.add("Turkmenistan");
names.add("Turks And Caicos Islands");
names.add("Tuvalu");
names.add("Uganda");
names.add("Ukraine");
names.add("United Arab Emirates");
names.add("United Kingdom");
names.add("United States");
names.add("United States Minor Outlying Islands");
names.add("Uruguay");
names.add("Uzbekistan");
names.add("Vanuatu");
names.add("Vatican City State (Holy See)");
names.add("Venezuela");
names.add("Viet Nam");
names.add("Virgin Islands (British)");
names.add("Virgin Islands (U.S.)");
names.add("Wallis And Futuna Islands");
names.add("Western Sahara");
names.add("Yemen");
names.add("Zambia");
names.add("Zimbabwe");
}
/**
* 返回以prefix开头的列表
*/
public List<String> findNames(String prefix) {
String prefixUpper = prefix.toUpperCase();
//建了一个新的List
List<String> matches = new ArrayList<String>();
Iterator<String> iter = names.iterator();
//循环所有的国家
while (iter.hasNext()) {
String name = iter.next();
String nameUpperCase = name.toUpperCase();
// 都转成大写再进行比较
if (nameUpperCase.startsWith(prefixUpper)) {
// 加入列表中
matches.add(name);
}
}
return matches;
}
}
AutoCompleteServlet 控制器
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import service.NameService;
public class AutoCompleteServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String prefix=request.getParameter("name").trim();
//得到列表的类, names 是所有的列表
NameService nameService = new NameService();
//返回以它开始的列表
List<String> matching = nameService.findNames(prefix);
if(matching.size()>0){
//注意这里的类型是
response.setCharacterEncoding("text/plain;charset=GBK");
//缓存
response.setHeader("Cache-Control", "no-cache");
//将 List 转成 JSON 对象
JSONArray names = JSONArray.fromObject(matching);
out.print(names);
//释放资源
matching = null;
nameService = null;
}else{
//返回供 JavaScript 调用,表示请求成功,但没有新的信息,设置响应的状态码204
response.setStatus(HttpServletResponse.SC_NO_CONTENT);
}
out.flush();
out.close();
}
}
web.xml 配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<servlet>
<servlet-name>autoCompleteServlet</servlet-name>
<servlet-class>servlet.AutoCompleteServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>autoCompleteServlet</servlet-name>
<url-pattern>/autoComplete</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
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>
<base href="<%=basePath%>">
<title>自动完成</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/name.js"></script>
</head>
<body>
<div id="main">
<img src="image/google.gif" alt="Google谷歌" width="285" height="110" />
<br />
<!-- 输入文本框 -->
<input type="text" id="names"/>
<!-- 显示自动完成的DIV对象 -->
<div id="popup">
<table id="nameTable" border="0" cellspacing="0" cellpadding="0">
<!--指明行为表格主体-->
<tbody id="nameTableBody">
</tbody>
</table>
</div>
<input id="btnSearch" type="button" value="Google 搜索"/>
</div>
</body>
</html>
name.js 脚本
$(function(){
//文本框按键升起事件
$("#names").keyup(function(){
//得到文本框的值
var prefix=$.trim($(this).val());
//清空原有的内容
$("#nameTableBody").html("");
if(prefix.length > 0){
//用 get 方法查询
$.get("autoComplete","name="+prefix,function(data){
var row = "";
for(var i=0;i<data.length;i++){
//每次加 1 个字符串
row = "<tr><td align='left'>";
row += data[i];
row += "</td></tr>";
$("#nameTableBody").append(row);
}
//改变样式
$("#nameTableBody td").each(function(){
$(this).addClass("mouseOut");
$(this).mouseover(function(){
$(this).addClass("mouseOver");
}).mouseout(function(){
$(this).removeClass("mouseOver");
});
//单击事件
$(this).click(function(){
//把当前值放入文本框中
$("#names").val($(this).text());
//清空
$("#nameTableBody").html("");
});
});
},"JSON");
}
});
});
效果图: