Ajax+JSON 模拟谷歌搜索页面

图示：

 

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");
		}
	});
});

 

效果图：