jQuery Autocomplete Plugin-优快云博客

本文介绍了一个基于jQuery的自动完成插件示例，展示了如何为不同类型的输入（如月份选择、电子邮件地址及城市名等）实现自动补全功能。通过具体的HTML和JavaScript代码示例，展示了如何配置插件选项以实现各种定制化的自动补全行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!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="../js/jquery.js"></script>
		<script type='text/javascript' src='../js/myautocomplete.js'></script>
		<script type='text/javascript' src='../js/jquery.autocomplete.js'></script>
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
		<link rel="stylesheet" type="text/css" href="../css/jquery.autocomplete.css" />
	</head>
	<body>
		<div id="content">
			<form autocomplete="on">
				<p>
					<label>
						Month (local):
					</label>
					<input type="text" id="month" />
				</p>
				<p>
					<label>
						E-Mail
					</label>
					<input type="text" id="email" />
				</p>
				<p>
					<label>
						Tags (local):
					</label>
					<input type="text" id='tags' />
				</p>
				<p>
					<label>
						Image search (remote):
					</label>
					<input type="text" id='imageSearch' />
				</p>
				<p>
					<label>
						Multiple Cities (local):
					</label>
					<textarea id='suggest3' cols='40' rows='3'></textarea>
				</p>
			</form>
		</div>
	</body>
</html>


$().ready(function() {
	$("#tags").autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp"], {
				width : 320,
				max : 4,
				highlight : false,
				multiple : true,
				multipleSeparator : " ",
				scroll : true,
				scrollHeight : 300
			});

	var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
	$("#month").autocomplete(months, {
				minChars : 0,
				max : 12,
				autoFill : true,
				mustMatch : true,
				matchContains : false,
				scrollHeight : 220,
				formatItem : function(data, i, total) {
					// don't show the current month in the list of values (for whatever reason)
					if (data[0] == months[new Date().getMonth()])
						return false;
					return data[0];
				}
			});
	$("#imageSearch").autocomplete("../ImageSearchServlet", {
				width : 320,
				max : 4,
				highlight : false,
				scroll : true,
				scrollHeight : 300,
				formatItem : function(data, i, n, value) {
					return "<img src='images/" + value + "'/> " + value.split(".")[0];
				},
				formatResult : function(data, value) {
					return value.split(".")[0];
				}
			});
	// function format(mail) {
	// return mail.name + " <" + mail.to + "&gt";
	// }
	function format(row, i, max) {
		return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
	}
	$("#email").autocomplete('../AutocompleteServlet', {
				multiple : false,
				parse : function(data) {
					return $.map(eval(data), function(row) {
								return {
									data : row,
									value : row.name,
									result : row.name + " <" + row.to + ">"
								}
							});
				},
				// formatItem: function(item) {
				// return format(item);
				// }
				formatItem : function(row, i, max) {
					return row.name + " " + row.to;
				}
			}).result(function(e, item) {
				//$("#content").append("<p>selected " + format(item) + "</p>");
			});

	var cities = ["Aberdeen", "Atwater", "Butler", "Byesville", "Cable", "Cadiz", "Dunkirk", "Dupont", "East Claridon", "East Fultonham", "Fulton", "Fultonham", "Galena",
			"Galion", "Huntsville", "Huron", "Iberia", "Independence", "Johnstown", "Junction City", "Kalida", "Kansas", "Lynx", "Lyons", "Macedonia", "Macksburg", "Nova",
			"Novelty", "Oak Harbor", "Oak Hill", "Portsmouth", "Potsdam", "Quaker City", "Quincy", "Racine", "Radnor", "Sylvania", "Syracuse", "Tallmadge", "Tarlton",
			"Tuscarawas", "Twinsburg", "Uhrichsville", "Union City", "Vincent", "Vinton", "Wadsworth", "Wakefield", "Xenia", "Yellow Springs", "Yorkshire", "Zaleski",
			"Zanesfield", "Zanesville", "Zoar"];

	$("#suggest3").autocomplete(cities, {
				multiple : true,
				mustMatch : true,
				autoFill : true
			});
});


import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @Title:AutocompleteServlet.java
 * @Description:<br>
 *               <br>
 * @Company:
 * @author <a href="mailto:wang-yu@msn.com">WangYu</a></br>
 * @version 1.0 <br>
 * @since j2sdk1.4.2 <br>
 */

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 {

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		String q = request.getParameter("q");
		Map map = new HashMap();
		Set entrys = map.entrySet();
		map.put("wangyu", "wang-yu@msn.com");
		map.put("admin", "admin@msn.com");
		StringBuffer stringBuffer = new StringBuffer();
		stringBuffer.append("[");
		Iterator iterator = entrys.iterator();
		while (iterator.hasNext()) {
			Map.Entry entry = (Map.Entry) iterator.next();
			//if(q.equals(entry.getKey().toString()))
			stringBuffer.append("{ name: '" + entry.getKey() + "', to: '" + entry.getValue() + "' }, ");
		}
		stringBuffer.append("]");
		System.out.println(stringBuffer);
		System.out.println(q);
		out.print(stringBuffer);
		out.flush();
		out.close();
	}

}


import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @Title:ImageSearchServlet.java
 * @Description:<br>
 * 				<br>
 * @Company:
 * @author <a href="mailto:wang-yu@msn.com">WangYu</a></br>
 * @version 1.0 <br>
 * @since j2sdk1.4.2 <br>
 */

public class ImageSearchServlet 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 {

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		String path = request.getParameter("q");
		out.print("Antwerpen.jpg \n Antwerpen.jpg");
		out.flush();
		out.close();
	}

}