<!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();
}
}
分享到:
相关推荐
jQuery Autocomplete plugin是在jQuery的基础上开发的一套小巧的输入下拉提示插件,这是它的PHP应用实例,大部分功能与HTML格式网页类同,这里增加了一些需要PHp程序配合的内容,它不但有输入提示功能,而且示例本身...
NULL 博文链接:https://gznofeng.iteye.com/blog/1010250
jQuery的Autocomplete(自动完成、自动填充)插件有不少,但比较下来我感觉,还是bassistance.de的JQuery Autocomplete plugin比较强大
jQuery plugin for autocomplete - jQuery自动完成插件
jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html
jQuery的Autocomplete(自动完成、自动填充)插件有不少,但比较下来我感觉,还是bassistance.de的JQuery Autocomplete plugin比较强大,我们就来写一些代码感受一下。
jQuery Autocomplete plugin 写的比较满意,拿出来分享,欢迎大家找BUG。
官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete 当前版本:1.1 需要JQuery版本:1.2.6+ 首先是最重要的方法 autocomplete( url or data, [options] ) 第一个参数可以是数组或者url。...
1、jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http://docs.jquery.com/Plugins/Autocomplete 2、jquery.autocomplete详解 语法: autocomplete(urlor data, ...
autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件)。 淘宝商品搜索功能 效果: 下面来使用 autocomplete插件来实现类似效果。 1. 创建 ...
一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autocomplete插件配合实现自动完成功能。演示地址:http://www.jq22.com/jquery-info426
前端项目-jquery-flexdatalist,jQuery Datalist Autocomplete plugin
autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件)。 淘宝商品搜索功能 效果: 下面来使用 autocomplete插件来实现类似效果。1. 创建 ...
一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autocomplete插件配合实现自动完成功能。 官网:http://xoxco.com/projects/code/tagsinput/ 截图: (下面是翻译了...
jQuery-multiAutocomplete 一个jQuery插件,允许一个输入中多个自动完成功能。 用其他语言阅读:。 示范 兼容性 jQuery-multiAutocomplete已在主要浏览器上与jQuery 1.7+一起测试: Chrome45+ Firefox 22.7+ ...
jquery.email-autocomplete.js 一个jQuery插件,可以在您的用户在电子邮件地址字段中键入内容时建议并自动完成域。 它有什么作用? 当您的用户键入“ user @ gm”时,该插件将根据来自预定义电子邮件域列表的第一...
#Autocomplete 1.2 ## Plugin em jQuery deauto-sugestõespara campos de texto ### Autor Diego Mengarda / ###授权许可Lançado抽泣一个授权许可MIT - ##Instalação ### Passo 1:包含所有必要内容 <!...
用于搜索自动完成功能的第一方 jQuery插件。内容入门 :hatching_chick: 要求: 网站搜索帐户。 在注册。 网站搜索引擎中包含一些数据。 在网页标题中包含以下内容: 最新版本的jQuery Swiftype jQuery插件(可选)...
[Interactions] Draggable Droppable Resizable Selectable Sortable ...These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started.
jquery-accessible-autocomplete-list-aria:这个jQuery插件将把带有数据列表的简单文本输入转换并增强为具有自动完成功能的精彩而闪亮的输入