jQuery Autocomplete Plugin

wangyu

浏览: 1357130 次
性别:
来自: 北京

最近访客更多访客>>

akingde

小强199184

dondavid

laughing_yang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery Java Servlet ASP ColdFusion

<!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 + " &lt;" + 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();
	}

}

分享到：