jQuery Autocomplete Plugin
张通
<!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 + ">";
// }
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();
}
}
类似资料：