用AJAX实现自动补全的功能

最新推荐文章于 2022-08-21 16:41:54 发布

夜光寒

最新推荐文章于 2022-08-21 16:41:54 发布

阅读量2.8k

点赞数

分类专栏： AJAX 文章标签： ajax function xmlhttprequest string list iterator

本文链接：https://blog.csdn.net/nlcold/article/details/5935337

版权

AJAX 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JSP页面：

<%@page contentType="text/html; charset=GBK"%> <html> <head> <title>自动完成</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.mouseOut { background: #708090; color: #FFFAFA; } .mouseOver { background: #FFFAFA; color: #000000; } .westFont { font-family: Arial; font-size: 12px; height: 20; }</style> <mce:script type="text/javascript"></mce:script> </head> <body> <div align="center"> <img src="image/google.gif" mce_src="image/google.gif" alt="Google谷歌" width="285" height="110"> <br> <input type="text" size="60" id="names" onKeyUp="findNames()" class="westFont" /> </div> <div style="position: absolute;" mce_style="position: absolute;" id="popup"> <div align="center"> <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0">  <tbody id="name_table_body" class="westFont"> </tbody> </table> </div> </div> <div align="center"> <input name="btnSearch" type="button" value="Google 搜索" onClick="alert(inputField.value);"> </div> </body> </html>

服务器端代码：

package autocomplete; import java.util.*; public class NameService { //包含所有值的列表 private List names; private NameService(List list_of_names) { this.names = list_of_names; } public static NameService getInstance(List list_of_names) { return new NameService(list_of_names); } /** * 返回以prefix开头的列表 */ public List findNames(String prefix) { String prefix_upper = prefix.toUpperCase(); List matches = new ArrayList(); Iterator iter = names.iterator(); while (iter.hasNext()) { String name = (String) iter.next(); String name_upper_case = name.toUpperCase(); //都转成大写再进行比较 if (name_upper_case.startsWith(prefix_upper)) { //加入列表中 matches.add(name); } } return matches; } }

Servlet:

package autocomplete; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AutoCompleteServlet extends HttpServlet { private List<String> names = new ArrayList<String>(); // Initialize global variables public void init() throws ServletException { // 实际可以加在数据库中 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)H"); 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"); } // Process the HTTP Get request @SuppressWarnings("unchecked") public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String prefix = request.getParameter("names").trim(); // 得到列表的类,names是所有的列表 NameService service = NameService.getInstance(names); // 返回以它开始的列表 List<String> matching = service.findNames(prefix); if (matching.size() > 0) { PrintWriter out = response.getWriter(); // xml类型 response.setContentType("text/xml;charset=utf-8"); // 不缓存 response.setHeader("Cache-Control", "no-cache"); // 写xml类型 out.println("<response>"); Iterator iter = matching.iterator(); while (iter.hasNext()) { String name = (String) iter.next(); out.println("<name>" + name + "</name>"); } out.println("</response>"); // 释放资源 matching = null; service = null; out.close(); } else { // 返回供javascript调用，表示请求成功，但没有新的信息返回，设置响应的状态码204 response.setStatus(HttpServletResponse.SC_NO_CONTENT); } } // Process the HTTP Post request public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }