xudongcsharp
- 浏览: 467366 次
- 性别:
- 来自: 上海
-
文章分类
- 全部博客 (288)
- Java (70)
- Web (11)
- JSP (18)
- JavaScript (25)
- JQuery (22)
- HTML (7)
- CSS (2)
- Struts2.X (6)
- Ibatis/Mybatis (6)
- Hibernate (4)
- Spring (8)
- Oracle (23)
- MySql (9)
- Apache (1)
- Tomcat (9)
- Weblogic (2)
- Maven (6)
- Flex (0)
- Junit (2)
- Test (1)
- SVN (6)
- GIS (3)
- Android (1)
- Eclipse (10)
- Thread (3)
- JVM (1)
- Cache (2)
- Design pattern (1)
- Nosql (3)
- Linux (10)
- Hudson/Jenkins (1)
- MQ (1)
- Network (2)
- 生活工作 (5)
- 架构师之路 (6)
- 知识精华荟萃 (9)
- Interview (13)
最新评论
-
276847139：
方法很有效，我的问题就在是在父项目的.classpa ...
手动添加Maven Dependencies -
coosummer：
推荐使用http://buttoncssgenerator.c ...
button css 样式 -
lqz2012：
DBFFileReader是外部框架里面的吧，不是JDK的。楼 ...
java读取dbf文件 -
xudongcsharp：
lx13345 写道java.lang.NoSuchMetho ...
Spring常用错误 -
lx13345：
jar是hibernate3.3GA，ehcache-1.5. ...
Spring常用错误
HTML
<html>
<head>
<title>防Google自动补全</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jslib/jquery.1.3.2.js"></script>
<script type="text/javascript" src="jslib/jqueryauto.js"></script>
</head>
<body>
仿Google自动补全<input type="text" id="word"/>
<input type="button" value="搜索"><br/>
<div id="auto"></div>
</body>
</html>
JS：
//定义全局变量,表示当前高亮的节点
var highlightindex=-1;
var timeoutId;
$(document).ready(function(){
var wordInput=$("#word");
var wordInputOffset=wordInput.offset();
$("#auto").hide().css("border","1px black solid").css("position","absolute")
.css("top",wordInputOffset.top+wordInput.height()+ 5 +"px")
.css("left",wordInputOffset.left+"px").width(wordInput.width()+ 2);
//响应键盘按下事件
wordInput.keyup(function(event){
//处理文本框的键盘事件
var myEvent=event || window.event;
var keyCode=myEvent.keyCode;
//如果输入的是字母,应将最新的文本框值输送到服务器
//按下退格键或删除键也应获得最新响应数据
if(keyCode>=65 && keyCode<=90 || keyCode==8 || keyCode==46){
//1.首先获取文本框的值
var wordVal=$("#word").val();
var autoNode=$("#auto");
if(wordVal!==""){
//对上次未完成的延时操作进行取消
clearTimeout(timeoutId);
//延时操作,避免用户打字过快相关误操作,减轻服务端压力,采用延时加载的方法
timeoutId=setTimeout(function(){
//2.异步传值
$.post("autocomplete",{word:wordVal},function(data){
//将dom对象data转换成jquery的对象
var words=eval(data);
//清空上次的请求结果
autoNode.html("");
for(i in words){
//alert(words[i]);
//新建div节点 插入到结果div框中
var newDivNode=$("<div>").attr("id",i);
newDivNode.html(words[i]).appendTo(autoNode);
//增加鼠标进入事件,高亮节点
newDivNode.mouseover(function(){
//将原来高亮的节点取消
if(highlightindex!=-1){
autoNode.children("div").eq(highlightindex).css("background-color","white");
}
//记录新的高亮节点索引
highlightindex=$(this).attr("id");
$(this).css("background-color","red");
});
//增加鼠标移出事件,失去高亮
newDivNode.mouseout(function(){
$(this).css("background-color","white");
});
//双击鼠标自动补全
newDivNode.click(function(){
$("#word").val($(this).html());
autoNode.hide();
highlightindex=-1;
});
}
if(words.length>0){
autoNode.show();
}else{
autoNode.hide();
//弹出框隐藏的同时,高亮节点的值-1
highlightindex=-1;
}
});
},500);
}else{
autoNode.hide();
//弹出框隐藏的同时,高亮节点的值-1
highlightindex=-1;
}
}else if(keyCode==38 || keyCode==40){
//按上下键时对应操作
if(keyCode==38 ){
//向上
var auotoNodes=$("#auto").children("div");
if(highlightindex!=-1){
//如果原来存在高亮节点,则改为白色
auotoNodes.eq(highlightindex).css("background-color","white");
highlightindex --;
}else{
highlightindex=auotoNodes.length-1;
}
if(highlightindex ==-1){
//如果改完索引以后变为-1,则指向最后一个
highlightindex=auotoNodes.length-1;
}
//让现在高亮的内容变为红色
auotoNodes.eq(highlightindex).css("background-color","red");
}
if(keyCode==40 ){
//向下
var auotoNodes=$("#auto").children("div");
if(highlightindex!=-1){
//如果原来存在高亮节点,则改为白色
auotoNodes.eq(highlightindex).css("background-color","white");
}
highlightindex ++;
if(highlightindex == auotoNodes.length){
//如果改完索引以后变为-1,则指向最后一个
highlightindex=0;
}
//让现在高亮的内容变为红色
auotoNodes.eq(highlightindex).css("background-color","red");
}
}else if(keyCode==13){
//按下回车响应事件
//下拉框有高亮
if(highlightindex!=-1){
//取下拉框值
var comText=$("#auto").hide().children("div").eq(highlightindex).text();
highlightindex=-1;
//修改文本框值
$("#word").val(comText);
alert("你选择的"+comText+"的已经提交了");
}else{
//下拉框无高亮
alert("你选择的"+$("#word").val()+"的已经提交了");
$("#auto").hide();
//让文本框失去焦点
$("#word").get(0).blur();
}
}
});
//按钮点击事件
$("input[type='button']").click(function(){
alert("你选择的"+$("#word").val()+"的已经提交了");
});
})
服务器端代码：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String word=request.getParameter("word");
//模仿从数据库匹配数据
StringBuffer sb=new StringBuffer();
if(word.startsWith("a")){
sb.append("['array','application','apple']");
}
if(word.startsWith("b")){
sb.append("['button','busy','box','basket']");
}
if(word.startsWith("c")){
sb.append("['city','collection']");
}
out.println(sb);
}
<html>
<head>
<title>防Google自动补全</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jslib/jquery.1.3.2.js"></script>
<script type="text/javascript" src="jslib/jqueryauto.js"></script>
</head>
<body>
仿Google自动补全<input type="text" id="word"/>
<input type="button" value="搜索"><br/>
<div id="auto"></div>
</body>
</html>
JS：
//定义全局变量,表示当前高亮的节点
var highlightindex=-1;
var timeoutId;
$(document).ready(function(){
var wordInput=$("#word");
var wordInputOffset=wordInput.offset();
$("#auto").hide().css("border","1px black solid").css("position","absolute")
.css("top",wordInputOffset.top+wordInput.height()+ 5 +"px")
.css("left",wordInputOffset.left+"px").width(wordInput.width()+ 2);
//响应键盘按下事件
wordInput.keyup(function(event){
//处理文本框的键盘事件
var myEvent=event || window.event;
var keyCode=myEvent.keyCode;
//如果输入的是字母,应将最新的文本框值输送到服务器
//按下退格键或删除键也应获得最新响应数据
if(keyCode>=65 && keyCode<=90 || keyCode==8 || keyCode==46){
//1.首先获取文本框的值
var wordVal=$("#word").val();
var autoNode=$("#auto");
if(wordVal!==""){
//对上次未完成的延时操作进行取消
clearTimeout(timeoutId);
//延时操作,避免用户打字过快相关误操作,减轻服务端压力,采用延时加载的方法
timeoutId=setTimeout(function(){
//2.异步传值
$.post("autocomplete",{word:wordVal},function(data){
//将dom对象data转换成jquery的对象
var words=eval(data);
//清空上次的请求结果
autoNode.html("");
for(i in words){
//alert(words[i]);
//新建div节点 插入到结果div框中
var newDivNode=$("<div>").attr("id",i);
newDivNode.html(words[i]).appendTo(autoNode);
//增加鼠标进入事件,高亮节点
newDivNode.mouseover(function(){
//将原来高亮的节点取消
if(highlightindex!=-1){
autoNode.children("div").eq(highlightindex).css("background-color","white");
}
//记录新的高亮节点索引
highlightindex=$(this).attr("id");
$(this).css("background-color","red");
});
//增加鼠标移出事件,失去高亮
newDivNode.mouseout(function(){
$(this).css("background-color","white");
});
//双击鼠标自动补全
newDivNode.click(function(){
$("#word").val($(this).html());
autoNode.hide();
highlightindex=-1;
});
}
if(words.length>0){
autoNode.show();
}else{
autoNode.hide();
//弹出框隐藏的同时,高亮节点的值-1
highlightindex=-1;
}
});
},500);
}else{
autoNode.hide();
//弹出框隐藏的同时,高亮节点的值-1
highlightindex=-1;
}
}else if(keyCode==38 || keyCode==40){
//按上下键时对应操作
if(keyCode==38 ){
//向上
var auotoNodes=$("#auto").children("div");
if(highlightindex!=-1){
//如果原来存在高亮节点,则改为白色
auotoNodes.eq(highlightindex).css("background-color","white");
highlightindex --;
}else{
highlightindex=auotoNodes.length-1;
}
if(highlightindex ==-1){
//如果改完索引以后变为-1,则指向最后一个
highlightindex=auotoNodes.length-1;
}
//让现在高亮的内容变为红色
auotoNodes.eq(highlightindex).css("background-color","red");
}
if(keyCode==40 ){
//向下
var auotoNodes=$("#auto").children("div");
if(highlightindex!=-1){
//如果原来存在高亮节点,则改为白色
auotoNodes.eq(highlightindex).css("background-color","white");
}
highlightindex ++;
if(highlightindex == auotoNodes.length){
//如果改完索引以后变为-1,则指向最后一个
highlightindex=0;
}
//让现在高亮的内容变为红色
auotoNodes.eq(highlightindex).css("background-color","red");
}
}else if(keyCode==13){
//按下回车响应事件
//下拉框有高亮
if(highlightindex!=-1){
//取下拉框值
var comText=$("#auto").hide().children("div").eq(highlightindex).text();
highlightindex=-1;
//修改文本框值
$("#word").val(comText);
alert("你选择的"+comText+"的已经提交了");
}else{
//下拉框无高亮
alert("你选择的"+$("#word").val()+"的已经提交了");
$("#auto").hide();
//让文本框失去焦点
$("#word").get(0).blur();
}
}
});
//按钮点击事件
$("input[type='button']").click(function(){
alert("你选择的"+$("#word").val()+"的已经提交了");
});
})
服务器端代码：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String word=request.getParameter("word");
//模仿从数据库匹配数据
StringBuffer sb=new StringBuffer();
if(word.startsWith("a")){
sb.append("['array','application','apple']");
}
if(word.startsWith("b")){
sb.append("['button','busy','box','basket']");
}
if(word.startsWith("c")){
sb.append("['city','collection']");
}
out.println(sb);
}
- JQueryAjaxDemo.zip (200.3 KB)
- 描述: Jquery实例
- 下载次数: 60
分享到：
发表评论
-
jQuery密码强度插件
2014-01-17 15:24 683Complexify 是一个用来检测密码强度的 jQuery ... -
jquery 跨域提交数据
2013-12-19 17:11 10751.直接用jquery中$.getJSON进行跨域提交 ... -
实现select多选插件
2013-12-04 14:40 954JQuery获取和设置Select选项 ... -
jQuery插件 AjaxFileUpload 异步上传
2012-12-15 14:13 842http://www.phpletter.com/Demo/ ... -
按钮禁用 启用控制
2012-12-15 13:16 916<input type="button&qu ... -
页面实现Lazy Loading效果,类似于微博
2012-12-10 17:06 2612用到Jquery插件：http://imakewebthing ... -
Jquery评级星型插件
2012-11-29 17:18 846Jquery评级星型插件 【官网】[url]http://w ... -
json
2012-07-23 22:15 842http://www.json.org/ tool:http ... -
滚动动态加载插件lazyload
2012-04-09 16:01 1700插件官网：http://www.appelsiini.net/ ... -
JQuery获取表单元素的值
2012-02-24 11:11 1110<body> 文本框： ... -
jquery插件之jplayer
2011-12-28 11:05 951http://www.jplayer.org -
jQuery通过$.browser来判断浏览器
2011-08-31 16:25 1361用jQuery来判断浏览器的 ... -
jquery validate
2011-08-29 21:44 1787http://topmanopensource.iteye.c ... -
jQuery过滤选择器
2011-08-22 23:24 1103jQuery过滤选择器主要是 ... -
服务器端向客户端输出json
2011-05-09 14:47 15331.服务器端传送一个字符串到客户端,客户端通过eval()得到 ... -
append()方法使用出错
2011-04-29 16:02 1704今天用append方法时动态插入一个表格，在FF下是可以看到效 ... -
Ajax使用时间戳来解决IE缓冲问题
2011-04-24 17:10 2177当你的ajax需要的数据是及时更新的，也就是说在没有刷新页面的 ... -
JQuery常用积累(值得你进来！)
2011-04-21 17:08 17951.如何通过Jquery获取radio的值 如何通过Jquer ... -
解决AJAX中文乱码
2011-04-21 15:51 1218问题描述：在利用JQuery的$.get()方式url?use ... -
jquery validate
2011-01-15 01:39 1133一、准备工作 需要JQuery版本：1.2.6+, 兼容 1. ...
相关推荐
改进版 jquery 仿百度谷歌自动补全输入（支持中文） 本资源原版本是在本论坛下载的，但只支持英文输入的自动补全，后经改进，现版本可支持中文和数字输入的自动补全，特来分享，感谢原版作者
jquery实现模仿google自动补全案例，运行环境tomcat；
jquery实现的带有分页效果的仿google的自动补齐效果
AJAX jquery 模仿谷歌搜索自动补全功能，非常经典的例子。欢迎大家来下载学习。
修改网上的代码完成的，使用jquery+JavaScript形式写的，服务端代码用java编写，当然你可以用其他任何语言编写。suggest是MyEclipse的一个工程，直接import既可用。也可以提取里面的文件自己修改
java与jQuery整合ajax仿googleSuggest自动补全实例，以返回的json格式的数据对象
jquery+flex+自动补全,在输入框输入后，自动提示，类似于google的搜索。
Jquery实现仿搜索引擎(百度、谷歌)文本框自动补全插件，仿百度、谷歌的搜索效果
ajax jquery技术 GoogleSuggest 自动补全 源代码
实现类似类google和baidu搜索输入框的智能提示，文本输入框自动补全功能。
NULL 博文链接：https://lc2586.iteye.com/blog/731375
jQ自动补全效果，就是大家所说的自动完成AutoComplete功能的代码，在页面加载时就获取，然后用户输入匹配提前加载的数据，根据用户输入到数据库查找匹配的数据显示上来，前三个框都是属于第一种，最后一个框模拟百度...
jquery.autocomplete.min.js插件 仿google实现自动补全
仿照google自动补全，jQuery是近段时间里比较流行的一个JavaScript框架，不断有使用者开发出新的 jQuery插件。下面收集了50个开发者最喜欢使用的jQuery插件。
包含传智播客Jquery上课所有实例(Java版本)
类似百度、谷歌的自动补全，很不错的一个Demo
一个基于Jquery+asp.net 2.0+access实现类似百度，Google等搜索引擎根据用户输入关键字的前缀就能实现自动把与前缀相似的结果列出来的功能实例。为了方便测试，数据库使用的是access，也就是说下载完后，只要你已经...
使用jsp 类型 <contentType="text/xml"> + jquery