- 浏览: 85470 次
- 性别:
- 来自: 苏州
最新评论
-
javazeke:
自己支持一下,,,希望下周有help
求oracle11g和10g 双机热备文档 -
javazeke:
kimmking 写道mr_kairy 写道看你的结构 就是 ...
江湖求方案,类似SSO系统的需求 -
javazeke:
yangdefeng95802 写道LZ的图是什么软件画的?真 ...
江湖求方案,类似SSO系统的需求 -
javazeke:
mr_kairy 写道看你的结构 就是 SOA 解决方案。。 ...
江湖求方案,类似SSO系统的需求 -
javazeke:
threestone1026 写道使用cas了
感谢thre ...
江湖求方案,类似SSO系统的需求
自动补全
1. 页面有一个文本框,一个自动提示层,一个按
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script> <script type="text/javascript" src="../js/autoComplete.js"></script> <div style="text-align: left; width: 500px;"> <input type="text" id="key" style="width: 400px;height:25px;" /> <input type="button" id="commit" style="background-color:#1874CD;width:70px;height:25px;border:0px;color:#ffffff;" value=" 提 交 "/> <div id="autoKey"></div> </div>
自动提示JavaScript…
//页面加载好,autoKey应该隐藏
$(document).ready(function(){
//定义高亮变量,控制上下键的选择
//-1代表不高亮任何行
var highlightindex = -1;
//提示层的子层数组
var completesVal;
//将要显示的提示
var keys;
//时间延迟对象
var timeDelay;
//获得输入input的对象
var keyInput=$("#key");
var keyInputOffset=keyInput.offset();
var autoDiv=$("#autoKey");
//提示层的样式
autoDiv.hide().css("border","1px solid #999999").css("position","absolute")
.css("top",keyInputOffset.top + keyInput.height() + 8 + "px")
.css("left",keyInputOffset.left + "px").width(keyInput.width() + 6)
.css("color","#aaaaaa").css("z-index","10").css("background-color","#FFFFFF");
//按键按下后与服务器的交互
keyInput.keyup(function(event){
//获取键盘事件对象
var keyEvent=event || window.event;
//判断键盘输入的值得范围
//1.输入的是正常的字母
//2.向上向下键
//3。回车键
var keyCode=keyEvent.keyCode;
if(keyCode !=38 && keyCode !=40 && keyCode != 13){
//获取当前文本框中的值
var currentVal=keyInput.val();
//如果当前的文本框内容为空,就不在向服务器发送请求
if(currentVal != ""){
//取消上次提交
window.clearTimeout(timeDelay);
//延迟500ms提交,防止频繁提交
timeDelay=window.setTimeout(function(){
$.post("../ParseParam",{paramInfo:currentVal},function(data){
//清空autoDiv的内容并且隐藏
autoDiv.html("");
//对回传的数据抽取,组成一个key的数组
keys=$(data).find("key");
keys.each(function(){
var keyval=$(this).text();
if(keyval !=null){
$("<div>").css("font-size","13px").css("height","18px").css("padding-top","1px").html(keyval).appendTo(autoDiv);
}
});
if(keys.length>0){
//为提示加上鼠标的选择功能
//鼠标over||out会触发事件,并高亮
//单击高亮层关闭提示层,并且把值传给文本框
completesVal=autoDiv.children("div");
//鼠标一移到autoKey上面,上下键的选择就取消
autoDiv.mouseover(function(){
//highlightindex不等于-1说明先前用上下键移动过
if(highlightindex != -1){
//定位到那个节点,取消其高亮
completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa");
//highlightindex = -1;
highlightindex = -1;
}
});
completesVal.each(function(){
var t=$(this);
t.css("cursor","pointer").mouseover(function(){
//加上mouseover事件
t.css("background-color","#7EC0EE").css("color","#000000");
}).mouseout(function(){
//mouseout事件
t.css("background-color","white").css("color","#aaaaaa");
}).click(function(){
//单击事件
keyInput.val(t.text());
autoDiv.hide();
});
});
highlightindex = -1;
autoDiv.show();
}else{
highlightindex = -1;
autoDiv.hide();
}
},"xml");
},500);
}
}else if(keyCode == 38 || keyCode ==40 || keyCode == 13){
//第一步先获得提示框里所有补全信息的数组
// var completesVal=$("#autoKey").children("div");考虑到效率,把这步放到全局
//向下键的控制
if(keyCode == 40){
//如果现在的高亮是存在的,那么我们就要移动highlightindex
if(highlightindex != -1){
//去掉当前高亮
completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa");
}
//移动高亮的指针,
//注意这里的highlightindex++一定要放在if的外面,
// 放在里面如果hightlightindex=-1,则永远也移动不了
highlightindex++;
//判断是否到了最后一个元素
if(highlightindex == completesVal.length){
highlightindex = 0;
}
//高亮当前highlightindex节点
completesVal.eq(highlightindex).css("background-color","#7EC0EE").css("color","#000000");
}
//向上键的控制
if(keyCode == 38){
if(highlightindex != -1){
completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa");
highlightindex--;
}
if(highlightindex ==-1){
highlightindex=completesVal.length;
}
//高亮当前highlightindex节点
completesVal.eq(highlightindex).css("background-color","#7EC0EE").css("color","#000000");
}
//enter键的控制
//1.按下enter键,把提示的值传给文本框
//2.关闭提示层
//3.提交
if(keyCode == 13){
if(highlightindex != -1){
//获取当前高亮值
var comsVal = completesVal.eq(highlightindex).text();
//给文本框赋值
keyInput.val(comsVal);
//高亮索引回归到初始化
highlightindex = -1;
//隐藏提示框
autoDiv.hide();
}else{
commitSearch();
//文本框失去焦点,不然按回车会不停的发出请求
keyInput.get(0).blur();
autoDiv.hide();
}
}
}
});
//提交按钮的事件
var commitBtn=$("#commit");
//commitBtn的click事件
commitBtn.click(commitSearch);
//提交函数
function commitSearch(){
var cv=keyInput.val();
//cv=encodeURIComponent(cv);
window.location.href="../SearchIndex?paramInfo="+cv;
// $.get("../SearchIndex",{paramInfo:cv});
}
//keyInput失去焦点后关闭提示层
//keyInput.blur(function(){
//autoDiv.hide();
//highlightindex = -1;
// });
});
后面的一部分被截断了,可以到我的首页,有续。。
发表评论
-
求oracle11g和10g 双机热备文档
2010-12-17 22:13 1520项目来了,,需求下来,,怕赔不起,,决定用热备 可怜的我,, ... -
江湖求方案,类似SSO系统的需求
2010-10-16 10:59 1451现有资料,大Boss交代我来弄,说实话,这东东我也不知道怎么 ... -
js array
2010-07-04 11:18 994zhuan zi http://renxiangzyq.i ... -
Ldap之活动目录之userAccountControl
2010-04-22 10:27 3808When you open the properties fo ... -
Ldap之活动目录之属性
2010-04-22 10:19 1907“常规”标签 姓 Sn 名 Givename ... -
Ldap之活动目录介绍三
2010-04-22 10:12 1202安装第二台域控制器 在安装完第一台域控制器后其域名为 n ... -
Ldap之活动目录介绍二
2010-04-22 10:10 1277运行 Active Directory 安 ... -
Ldap之活动目录介绍一
2010-04-22 09:43 2611最近一直在做java通过Ldap去操作活动目录数据的东东,过程 ... -
我迷茫,我应该怎么走。望各位JE大哥指点!
2010-03-26 09:56 1625小弟六月毕业,在学校还算好学生,从大二起接触编程,,那时的编程 ... -
xp桌面回收站恢复
2010-02-21 19:14 830开始-运行gpedit.msc-本地计算机策略-用户配 ... -
MyEclipse7.5注册机
2010-01-25 17:29 930首先感谢提供源码的那位大牛,我只是做成了exe执行文件而已 -
DSA和RSA算法的差异
2009-11-20 19:13 15521978年就出现了这种算法 ... -
仿Google自动补全 jquery
2009-11-20 16:40 2834应大家要求,发一个包,方便大家使用,有问题欢迎e-mail : ... -
对称加密的两种方式
2009-11-18 22:33 1817对称加密,这东东现在 ... -
java简单对象池
2009-11-10 20:53 3938在项目中用到,自己写了个对象池的管理(创建、保留、获取),那种 ... -
仿Google自动补全 jQuery 不含索引处理 2
2009-11-08 14:39 1043Servlet。。。。。。。。。。。。。。。。。 pu ... -
Java数据库通用查询及封装
2009-11-08 13:54 6243Java数据库通用查询及封装 时常在网上看到,有关Java数据 ... -
Java实现快排的算法
2009-10-14 22:28 2922Java实现快排的算法 public class Quick ... -
Collection List Set Map 区别记忆
2009-10-13 20:15 889一篇对Java集合讲解不错的文档,不是我写的,转过来和大家分享 ... -
List Set Map实现机制
2009-10-13 20:07 1868List接口对Collection进行 ...
相关推荐
改进版 jquery 仿百度谷歌自动补全输入(支持中文) 本资源原版本是在本论坛下载的,但只支持英文输入的自动补全,后经改进,现版本可支持中文和数字输入的自动补全,特来分享,感谢原版作者
实现仿搜索引擎文本框自动补全Jquery插件
修改网上的代码完成的,使用jquery+JavaScript形式写的,服务端代码用java编写,当然你可以用其他任何语言编写。suggest是MyEclipse的一个工程,直接import既可用。也可以提取里面的文件自己修改
jquery自动补全插件(jquery autocomplete) 内包含使用说明,前台+后台
java与jQuery整合ajax仿googleSuggest自动补全实例,以返回的json格式的数据对象
jQuery仿百度搜索下拉框自动补全代码插件一款高级的自动补全jQuery插件typeahead.js,仿百度搜索下拉框自动补全代码插件。
jQuery百度搜索自动补全插件是一款高级的自动补全jQuery插件typeahead.js。
自动补全例子基于php 非常简单易用 jquery suggest 自动补全插件演示 自动补全 jquery自动补全 jquery 输入提示
jquery实现模仿google自动补全案例,运行环境tomcat;
仿搜索引擎 文本自动补全 jquery实现
jquery 自动补全搜索框控件 jquery 自动补全搜索框控件 jquery 自动补全搜索框控件
jquery.autocomplete.min.js插件 仿google实现自动补全
自动补全以及jquery相关案例和验证码
Jquery实现仿搜索引擎文本框自动补全插件 包中含有:jquery-1.7.2.min.js,关键类库:jquery.bigautocomplete.js,应用于百度搜索自动提示内容.
Jquery实例 博文链接:https://xdjava.iteye.com/blog/1065976
使用jQuery Autocomplete实现的文本框自动补全
孤独的狼----jQuery实现自动补全功能
本示例为jquery自动补全的示例,其中包括两部分,第一是在本地构造的json格式的数据供自动补全用,第二是从后台将数据处理成json格式,jquery通过ajax请求后台的json数据,其中还有处理autocomplete不支持中文的方法...
C#自动补全,简单的补全,JqueryC#自动补全,简单的补全,JqueryC#自动补全,简单的补全,Jquery