- 浏览: 1357777 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (453)
- Struts2 (4)
- Struts1 (16)
- Spring (9)
- Hibernate (5)
- AJAX (16)
- MS Server (9)
- Oracle (35)
- 测试技术 (5)
- 其他 (37)
- JSF (1)
- EJB (5)
- ASP.NET (9)
- iBATIS (5)
- Struts Spring Hibernate (2)
- HTML (12)
- Eclipse使用 (5)
- 设计模式 (5)
- JSP (32)
- 正则表达式 (2)
- 服务器 (12)
- Java基础 (48)
- MySQL (4)
- 面试 (22)
- UML (1)
- 数据结构 (3)
- Ant (2)
- 规范 (4)
- JavaScript (29)
- 软件使用及技巧 (25)
- PHP (1)
- DWR (3)
- FreeMarker (1)
- ExtJs (17)
- JFreeChart (9)
- Reports (2)
- JavaException (1)
- Java Mail (1)
- Flex (9)
- 异常 (12)
- Log4j (2)
- WebService (1)
- jQuery (1)
- Sybase (2)
- myeclipse_plugin (2)
- Linux (5)
- jbpm (2)
- SCM (1)
- mongoDB (1)
最新评论
-
lihua2008love:
<typeAlias alias="User& ...
IBATIS简单操作 -
lihua2008love:
...
关于项目框架设计的一点学习 -
c_jinglin:
我使用<OBJECT CLASSID="cls ...
这就是个静态页面通过js控制mscomm对某com设备进行访问的例子. -
zlbjava:
赞,用了还不错
java获取请求的ip地址,并解析ip所属地区 -
完美天龙:
cs842813290 写道楼主,我明白的地方:在链表已有N个 ...
JAVA实现双向链表
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery 自动完成功能(优化版)</title> <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> </head> <body> <script type="text/javascript"> 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() + 3 + "px"); wordInput.keyup(function(event) { //处理文本框中的键盘事件 //如果输入字母,将文本框中最新信息发送给服务器 var myEvent = event || window.event; var keyCode = myEvent.keyCode;//获得键值 if (keyCode == 27) { var wordText = $("#word").val(); autoHide(); wordInput.text(wordText); } else { if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) { //8对应退格键,46对应删除键 var wordText = $("#word").val();//获得文本框中的内容 var autoNode = $("#auto"); if (wordText != "") { clearTimeout(timeoutId);//对上次未完成的延时操作进行取消 //延时操作,减少与服务器的交互次数,延时500ms,防止用户操作过快 timeoutId = setTimeout(function() { $.post("AutoCompleteServlet", {word:wordText}, function(data) {//发送数据,第二项是属性名对应属性值 var jqueryObj = $(data);//将dom对象data转换成jQuery的对象 var wordNodes = jqueryObj.find("word");//找到所有word节点 autoNode.html(""); wordNodes.each(function(i) { //i是索引,用来给id赋值 var wordNode = $(this);//获取单词内容 var newDivNode = $("<div>").attr("id", i).css("backgroundColor", "white"); newDivNode.html(wordNode.text()).appendTo(autoNode);//新建div节点,加入单词内容 //增加鼠标进入事件,高亮节点 newDivNode.mouseover(function() { //将原来高亮的节点取消高亮 if (highlightindex != -1) { $("#auto").children("div").eq(highlightindex) .css("backgroundColor", "white"); } //记录新的高亮索引 highlightindex = $(this).attr("id"); $(this).css("backgroundColor", "#3366CC").css("cursor","pointer"); }); //增加鼠标移出事件,取消节点高亮 newDivNode.mouseout(function() { if (keyCode == 13) { //判断是否按下回车键 //下拉框有高亮 if (highlightindex != -1) { lightEventHide(); highlightindex = -1; } else { alert("文本框中的[" + $("#word").val() + "]被提交了"); autoHide(); $("#word").get(0).blur();//让文本框失去焦点 } //取消鼠标移出节点的高亮 //$(this).css("backgroundColor", "white"); } } ); //增加鼠标点击事件,可以进行补全 newDivNode.click(function() { //取出高亮节点的文本内容 var comText = $(this).text(); autoHide(); highlightindex = -1; //文本框内容变为高亮节点内容 $("#word").val(comText); }); }); //添加单词内容到弹出框 if (wordNodes.length > 0) { autoNode.show(); } else { autoNode.hide(); highlightindex = -1;//弹出框隐藏,高亮节点索引设成-1 } }, "xml"); }, 300); } else { autoNode.hide(); highlightindex = -1; } } else if (keyCode == 38 || keyCode == 40) { //判断是否输入的是向上38向下40按键 if (keyCode == 38) { var autoNodes = $("#auto").children("div").css("background-color", "white"); if (highlightindex != -1) { autoNodes.eq(highlightindex).css("background-color", "white"); highlightindex--; } else { lightEvent(); highlightindex = autoNodes.length - 1; } if (highlightindex == -1) { highlightindex = autoNodes.length - 1;//如果改变索引值后index变成-1,则将索引值指向最后一个元素 } lightEvent(); autoNodes.eq(highlightindex).css("backgroundColor", "#3366CC"); } if (keyCode == 40) { var autoNodes = $("#auto").children("div"); if (highlightindex != -1) { autoNodes.eq(highlightindex).css("background-color", "white"); } highlightindex++; if (highlightindex == autoNodes.length) { highlightindex = 0;//如果改变索引值等于最大长度,则将索引值指向第一个元素 } lightEvent(); autoNodes.eq(highlightindex).css("backgroundColor", "#3366CC"); } } else if (keyCode == 13) { //判断是否按下回车键 //下拉框有高亮 if (highlightindex != -1) { lightEventHide(); highlightindex = -1; } else { alert("文本框中的[" + $("#word").val() + "]被提交了"); $("#auto").hide(); $("#word").get(0).blur();//让文本框失去焦点 } //下拉框没有高亮 } } } ) ; $("input[type='button']").click(function() { alert("文本框中的[" + $("#word").val() + "]被提交了"); }); }); function lightEventHide(){ var comText = $("#auto").hide().children("div").eq(highlightindex).text(); $("#word").val(comText); } function lightEvent(){ var comText = $("#auto").children("div").eq(highlightindex).text(); $("#word").val(comText); } function autoHide(){ $("#auto").hide(); } </script> <h3> <center>施杨 仿google自动补全(jQuery优化版)</center> </h3> <br /> <table align="center"> <tr><td> <input type="text" id="word" maxlength=2048 size=55 /> <br/> <td></tr> <tr><td align="center"> <input type="button" value="shiyang 搜索"/> </td></tr> </table> <br /> <div id="auto"></div> </body> </html>
评论
3 楼
jk138
2011-08-09
这个是itcast的ajax里的代码,不过还不错,做了优化
2 楼
heyjava
2009-10-22
明显是转载的..还贴上 原创....你这人太不厚道了...还说啥 诚信做人 狗屁!!
1 楼
lqw8668
2009-03-16
为什么不贴AutoCompleteServlet的代码????
发表评论
-
JSON的问题
2009-02-20 22:16 1443今天想利用json写一个tree,但是中途碰到一个关于单引号, ... -
JSON 小结
2009-02-19 16:29 1688JSON 即 JavaScript Object Nata ... -
IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结
2009-02-18 17:04 2789今天测试代码时,发现不少IE可以运行的ajax,但在FF中报错 ... -
AJAX数据加载页面
2009-02-18 10:32 2770<div id="divprogress ... -
JSON LIB 日期转换
2009-02-15 17:20 5766public class Person { priva ... -
json lib
2009-02-15 16:04 2422public class Test { public ... -
AJAX缓存
2009-02-14 16:46 1463//URL地址的时间戳,骗过浏览器不读缓存 function ... -
AjaxXMLHttpRequest
2009-02-14 14:22 1347// 定义一个全局的XMLHttpRequest对象 var ... -
AJAX异步通信技术学习笔记
2009-01-12 11:25 1633AJAX是一中运用JavaScript和可扩展编辑语言(XML ... -
JSON数据调用
2009-01-07 07:51 6780JSON (JavaScript Object Notatio ... -
Ajax Libraries
2008-06-16 21:29 1564Ajax Libraries Each library is ... -
JSP中使用AJAX示例:分别将结果提交为STRUTS,SERVLET,WEBWORK的不同操作方
2008-05-08 01:41 2644我原先刚开始学AJAX的时 ... -
Ajax的JSP示例以及相关知识介绍
2008-05-08 00:33 2304这是学习AJAX的第一篇 ... -
AJAX基础教程
2008-05-07 23:21 1247AJAX基础教程 这篇 ... -
AJAX+Servlet实现客户端无刷新请求服务器
2008-05-07 23:18 2763最近需要做一个在网页中要不断检测服务器端数据程序,当然最简单的 ...
相关推荐
本教程将详细讲解如何实现一个仿GoogleSuggest的自动补全功能,旨在提供一个绝对实用的解决方案。 首先,理解GoogleSuggest的工作原理至关重要。它基于用户在搜索框中输入的字符,实时从服务器端获取并展示可能的...
总的来说,仿谷歌百度实现输入自动补全功能是一个涉及前端、后端以及算法设计的综合性项目。通过这个项目,你可以深入理解Web交互设计,提升JavaScript编程能力,并掌握如何构建高效的API接口。同时,这也是一个很好...
在本项目中,我们将讨论如何实现一个仿百度、Google、谷歌的搜索引擎自动补全功能。 首先,自动补全的核心在于关键词匹配算法。常见的算法有Trie树(字典树)、Levenshtein距离(编辑距离)和基于TF-IDF的文本...
标题“改进版 jquery 仿百度谷歌自动补全输入(支持中文)”涉及到的是一个基于jQuery的前端开发技术,旨在实现类似百度和谷歌搜索框的自动补全功能,而且这一版本特别优化了对中文字符的支持。在网页交互设计中,...
**搜索自动补全技术详解** 搜索自动补全,也称为智能提示或自动建议,是一种常见的用户体验优化技术,广泛应用于搜索引擎、网站搜索框以及各种应用程序中。它的主要目的是提高用户输入效率,减少用户输入错误,同时...
在本篇博客“AJAX学习总结(九)---Jquery实例:仿googlesuggest自动补全功能”中,作者分享了如何使用jQuery实现一个类似Google Suggest的自动补全功能,这是一种常见的前端交互设计,广泛应用于搜索框输入时提供...
【仿谷歌自动补全】是一种常见的前端开发技术,主要用于提高用户在输入框中搜索或填写信息时的效率和用户体验。谷歌自动补全功能是通过分析用户的输入,预测并显示可能的搜索词,使得用户可以快速选择合适的选项,而...
总之,构建一个仿Google的文本框自动补全控件是一项涉及到JavaScript、DOM操作和用户体验设计的任务。通过实践,不仅可以提升你的前端开发技能,还能让你更好地理解如何用技术提升产品的可用性和效率。
本实例将探讨如何将这两者整合,通过AJAX技术实现一个仿Google Suggest的自动补全功能,该功能通常用于输入框中,为用户提供动态搜索建议。我们将详细解析这个实例中的各个组成部分。 首先,`index.jsp`是用户界面...
在本教程中,我们将深入探讨如何使用AJAX和jQuery实现谷歌搜索式的自动补全功能。自动补全是一种增强用户体验的常见技术,它允许用户在输入查询时获得即时建议,极大地提高了搜索效率。以下是对实现这一功能所需的...
标题中的“仿google自动补全检索建议”是指创建一个类似谷歌搜索框的自动补全功能,它能够在用户输入关键词时,提供与输入内容相关的搜索建议。这个功能在提高用户体验、加快搜索速度方面起到了重要作用。 首先,...
编写的一个仿谷歌自动补全的js。而且已改造通用模板,根据onfocus="init('hotKeyword1','1','<%=path %>/google/googlesearch.mvc')"几个关键key在sevice层中控制业务逻辑。
在本文中,我们将深入探讨如何使用jQuery来实现一个仿照百度和谷歌搜索引擎的文本框自动补全插件。这个插件的主要目标是提供用户友好的输入体验,通过预测和建议可能的搜索词来提高搜索效率。 ### jQuery简介 ...
在本文中,我们将深入探讨如何使用jQuery来实现一个模仿Google搜索的自动补全功能。这个功能常见于许多网站,能够极大地提升用户体验,帮助用户快速找到他们想要搜索的关键词。我们将基于给定的"jquery模仿google...
此项目“仿搜索引擎文本框自动补全插件”旨在模仿搜索引擎如百度、Google等的自动补全功能,为用户提供快速、准确的搜索建议,提升输入效率。这种功能通常通过JavaScript库,如jQuery,来实现,结合CSS进行样式设计...
本示例将深入解析如何使用jQuery Ajax实现一个仿Google Suggest的自动补全功能,特别针对中文输入进行了优化,并且结合了Java后端技术如jsp和Servlet。 首先,让我们理解这个功能的核心概念。Google Suggest的自动...
描述中提到的"jquery.autocomplete.min.js插件 仿google实现自动补全"是指使用jQuery UI库中的Autocomplete组件,这是一个轻量级的插件,用于实现文本输入框的自动补全功能。Google的搜索框就具有这种特性,当用户在...
在JavaScript编程中,实现类似百度或谷歌搜索框的输入框自动下拉补全功能是一项常见的需求,这可以提升用户体验,使用户在输入时快速找到可能的搜索建议。本实例将介绍如何利用JavaScript来创建这样的功能。 首先,...
本项目是基于jQuery实现的一种带有分页功能的自动补齐效果,模仿了Google搜索的智能提示功能。这个功能对于提高用户体验,尤其是进行大量数据检索时,能够极大地提升输入效率。 首先,我们要理解“自动补齐”...