- 浏览: 1230823 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (718)
- HTML (13)
- JS基础 (23)
- JS应用 (40)
- AJAX (6)
- JSP相关 (12)
- JAVA基础 (52)
- JAVA应用 (74)
- APPLET (11)
- SWING\RCP (2)
- JAVA反射 (6)
- 设计模式 (26)
- 数据库设计 (20)
- Struts (35)
- Struts2 (12)
- Spring (22)
- Hibernate (45)
- Ibatis (18)
- mybatis (3)
- SSH (8)
- UML (5)
- WebService (3)
- XML (16)
- Log4j (7)
- WEB容器 (26)
- 数据结构 (36)
- Linux (34)
- Ruby on Rails (1)
- 其它技术 (27)
- IDE配置 (15)
- 项目实战 (2)
- Oracle (69)
- JAVA报表 (7)
- Android学习 (2)
- 博客链接 (1)
- 网络基础 (1)
- WEB集群 (1)
- .Net开发 (11)
- PB (4)
- 系统构建 (15)
最新评论
-
jnjeC:
牛逼啊哥们,讲得太好了
Maven仓库理解、如何引入本地包、Maven多种方式打可执行jar包 -
九尾狐的yi巴:
很好 感谢!
Itext中文处理(更新版) -
luweifeng1983:
有用的,重启一下嘛。
设置eclipse外部修改文件后自动刷新 -
Master-Gao:
设置了也不管用,怎么破呢?
设置eclipse外部修改文件后自动刷新 -
aigo_h:
锋子还有时间写博客,还是很闲哈!
Add directory entries问题
本文转自:JQuery Ajax 仿google suggest 自动补全功能 支持中文(jsp / Servlet)
已修复bug、原因及解决方案: 1、自动补全提示框背景透明,导致与其后面的字重叠,最简单的办法,就是为<div>设置背景颜色。 2、当把文本框中的字删完了依然会弹出提示,解决方案,见代码。 3、当用户按回车选择自动补全提示框中高亮的条目时,同时也将文本框所在的form提交,但是提交的却并不是选中的条目而是之前在文本框中的文本。 解决方案,在回车事件监控后面加上$("form:first").submit();具体见代码。 网页: <head> …………………… <script language="javascript" type="text/javascript" src="jquery.js"></script> <script language="javascript" type="text/javascript" src="jqueryauto.js"></script> </head> <body> JQueryAutoComplete <input type="text" id="word" /> <input type="button" value="submit" /><br> <div id="auto"></div> </body> 重头戏在这,感慨一句,万能的刀勒符号啊!! JavaScript:jqueryauto.js //表示当前高亮的节点 var highlightindex = -1; var timeoutId; $(document).ready(function(){ var wordInput = $("#word"); var wordInputOffset = wordInput.offset(); //隐藏自动补全框并通过CSS设置补全框的位置大小及样式 $("#auto").hide().css("border","1px black solid").css("position","relative").css("background-color","white") .css("top",wordInputOffset.top+wordInput.height()+ 5 +"px") .css("left",wordInputOffset.left).width(wordInput.width() + 2); //此处可根据自己的网页布局以及页面元素大小调整。 //添加键盘按下并弹起的事件 wordInput.keyup(function(event){ //处理文本框中的键盘事件 var myEvent = event||window.event; var keyCode = myEvent.keyCode; //如果输入的是字母,退格,delete,空格或者数字键,应该将文本框中的最新信息发送给服务器,其中,空格键和数字键的加入使得输入中文也能支持~~ if((keyCode >= 65 && keyCode<=90) || (keyCode >= 48 && keyCode <= 57) ||(keyCode>=96 && keyCode<=105) || keyCode == 46 || keyCode == 8 || keyCode == 32){ //获取文本框的内容 var wordText = $("#word").val(); var autoNode = $("#auto"); if(wordText!=""){//2009.6.7 UPDATE:之前在这加上了退格与delete的keyCode的判断,实际上是没有必要的。 //将文本框中的内容发送到服务器端 //对上次未完成的延时操作进行取消 clearTimeout(timeoutId); //对于服务器端进行交互延迟500ms,避免快速打字造成的频繁请求 timeoutId = setTimeout(function(){ $.post("AutoCompleteServlet",{word:wordText},function(data){ //将dom对象data转换成JQuery的对象 var jqueryObj = $(data); //先找到所有的word节点 var wordNodes = jqueryObj.find("word"); //遍历所有的word节点,取出单词内容将单词内容添加到弹出框中 autoNode.html(" "); wordNodes.each(function(i){ //获取单词内容 var wordNode = $(this); //新建div节点将单词内容加入到新建的节点中,将新建的节点加入到弹出框的节点中 var newDivNode = $("<div>").attr("id",i); newDivNode.html(wordNode.text()).appendTo(autoNode); //增加鼠标进入事件,高亮节点; newDivNode.mouseover(function(){ if(highlightindex != -1){ $("#auto").children("div").eq(highlightindex).css("background-color","white"); } highlightindex = $(this).attr("id"); $(this).css("background-color","yellow"); }); //增加鼠标移出事件,取消当前高亮节点 newDivNode.mouseout(function(){ $(this).css("background-color","white"); }); //增加鼠标点击事件,可以进行补全 newDivNode.click(function(){ var comText = $(this).text(); $("#auto").hide(); highlightindex=-1; $("#word").val(comText); }); }); //如果服务器端有数据返回,则显示弹出框 if(wordNodes.length>0){ autoNode.show(); }else { autoNode.hide(); highlightindex=-1; } },"xml"); },500); }else{ autoNode.hide(); highlightindex=-1; } } else if(keyCode == 38 || keyCode==40){ //如果输入的是向上38向下40按键 if(keyCode == 38){ //up var autoNodes = $("#auto").children("div"); if(highlightindex !=-1) { autoNodes.eq(highlightindex).css("background-color","white"); highlightindex--; }else{ highlightindex = autoNodes.length -1; } if(highlightindex == -1){ //如果修改索引值以后index变成-1,则将索引中指向最后一个元素 highlightindex = autoNodes.length -1; } //让现在被高亮的内容变成黄色 autoNodes.eq(highlightindex).css("background-color","yellow"); } if(keyCode == 40){ //down var autoNodes = $("#auto").children("div"); if(highlightindex !=-1) { autoNodes.eq(highlightindex).css("background-color","white"); } highlightindex++; if(highlightindex == -1){ //如果修改索引值以后index变成-1,则将索引中指向最后一个元素 highlightindex = 0; } //让现在被高亮的内容变成黄色 autoNodes.eq(highlightindex).css("background-color","yellow"); } }else if(keyCode == 13){ //如果按下的是回车 //下拉框有高亮的内容 if(highlightindex !=-1) { var comText = $("#auto").hide().children("div").eq(highlightindex).text(); highlightindex=-1; $("#word").val(comText); //将文本框内容改成选中项 $("form:first").submit(); //提交form。若没有这句话,按下回车后,仅仅只改变了文本框里的内容,但是由于form本身就监控了回车按键默认为submit,提交的是文本框改变之前的内容,解决这个问题最简单的方式就是在文本框内容改变以后强制提交form的内容,此时,提交的内容就是选中项。 } //下拉框没有高亮的内容 else{ $("#auto").hide(); //让文本框失去焦点 $("#word").get(0).blur(); } } }); }) Servlet的doGet方法代码: request.setCharacterEncoding("UTF-8"); String word = request.getParameter("word"); //String word = new String(request.getParameter("word").getBytes("ISO-8859-1"),"UTF-8"); System.out.println(word); try { FileReader fr= new FileReader("D:\\study\\javaworkspace\\googleSuggestTest\\src\\wordbase.dic"); //可以根据服务器端不同的字典或者数据库修改。此处仅是示例而已。。。。 BufferedReader br = new BufferedReader(fr); ArrayList<String> qlist = new ArrayList<String>(); String row; while((row=br.readLine())!=null) { if(row.startsWith(word)) { qlist.add(row); if(qlist.size()==10) { break; } } } fr.close(); request.setAttribute("words", qlist); request.setAttribute("word",word); request.getRequestDispatcher("wordxml.jsp").forward(request, response); } catch (FileNotFoundException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } wordxml.jsp: <%@ page language="java" contentType="text/xml; charset=utf-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <words> <c:forEach var="word" items="${words}"> <word>${word}</word> </c:forEach> </words> 大致的主要流程就是JavaScript获取文本框内的鼠标事件,将内容发送至服务器端,服务器端根据关键字查询获得数据后以xml形式返回给客户端,处理以后通过css来控制<div>的显示,最终完成自动补全功能。
发表评论
-
Cookie相关操作
2013-02-20 17:44 941JS操作Cookie: http://www.oschin ... -
JS回车实现Tab功能
2012-11-07 15:50 1086//用回车跳到下一个输入框,用法:在<tab ... -
javascript的focus函数如何定位到textarea指定地方
2012-11-07 15:45 1908转:http://hi.baidu.com/codylee/i ... -
模式窗口window.showModalDialog()的用法
2012-02-14 13:01 849http://www.pqshow.com/design/ji ... -
JavaScript判断浏览器类型及版本
2011-11-23 19:13 9104转自:http://www.cnblogs.com/leadz ... -
JQuery基础
2011-11-15 20:46 701//$("#defaultPassId") ... -
JQuery 随机生成密码
2011-11-15 20:29 1187<script type="text/java ... -
JS生成随机密码
2011-11-15 17:24 1170<!DOCTYPE HTML PUBLIC " ... -
在什么时候才会用到fireEvent方法呢?
2011-10-14 17:28 1016本文转自:http://www.cnblo ... -
get提交中文后乱码的问题的解决
2011-09-16 13:19 756首先,encodeURIComponent对参数值 编码,要经 ... -
利用javascript实现web页面刷新的方法
2010-06-02 16:34 900javascript refresh page Java ... -
onkeyup,onkeydown,onkeypress
2010-02-03 13:17 6456在使用JavaScript做WEB键盘事件侦听捕获时,主要采 ... -
JS事件处理相关应用,srcElement
2010-01-22 01:20 1535对 evt = (evt) ? evt : window ... -
JS控制checkbox
2008-12-16 18:07 949下面的有关实现chckbox全选的方法或多或少存在一些缺陷,具 ... -
提交和设置表单的值
2008-12-18 13:26 901<inputtype="button&quo ... -
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)
2008-12-18 14:16 8461判断select选项中是否存在Value="p ... -
JS对话框的总结
2009-02-13 10:30 1073对话框有三种 1 alert 只是提醒,不能对脚本产生任何改变 ... -
JS类型转換parseInt应注意的问题
2009-02-13 10:40 880http://www.blogjava.net/smcdl/ ... -
JAVASCRIPT应用篇(1)--动态给对象添加属性
2009-02-20 16:55 894<script language="javas ... -
JAVASCRIPT应用篇(2)--完整的Prototype框架学习
2009-02-20 17:33 814看到有关JS框架的东东,保存一下过段时间再看 http:// ...
相关推荐
本示例将深入解析如何使用jQuery Ajax实现一个仿Google Suggest的自动补全功能,特别针对中文输入进行了优化,并且结合了Java后端技术如jsp和Servlet。 首先,让我们理解这个功能的核心概念。Google Suggest的自动...
在本篇博客“AJAX学习总结(九)---Jquery实例:仿googlesuggest自动补全功能”中,作者分享了如何使用jQuery实现一个类似Google Suggest的自动补全功能,这是一种常见的前端交互设计,广泛应用于搜索框输入时提供...
本实例将探讨如何将这两者整合,通过AJAX技术实现一个仿Google Suggest的自动补全功能,该功能通常用于输入框中,为用户提供动态搜索建议。我们将详细解析这个实例中的各个组成部分。 首先,`index.jsp`是用户界面...
本教程将详细讲解如何实现一个仿GoogleSuggest的自动补全功能,旨在提供一个绝对实用的解决方案。 首先,理解GoogleSuggest的工作原理至关重要。它基于用户在搜索框中输入的字符,实时从服务器端获取并展示可能的...
【标题】"GoogleSuggest ajax自动补全"是基于AJAX和jQuery技术实现的一个功能,它主要用于提升用户体验,提供在用户输入时实时显示搜索建议的功能。这个功能在很多搜索引擎和网站中都有应用,比如Google搜索,它能...
在提供的压缩包文件"GoogleSuggest"中,可能包含了一个关于谷歌搜索建议的示例,它展示了如何使用jQuery UI Autocomplete来模拟谷歌搜索的自动补全效果。通过分析和学习这个示例,你可以更深入地理解如何与服务器...
JavaScript Suggest自动补全的输入框下拉提示类是一种常见的前端开发技术,广泛应用于各种Web应用,如搜索引擎、表单输入、代码编辑器等。它为用户提供了一个方便、高效的交互体验,通过预测用户可能要输入的内容,...
jQuery Suggest插件就是这样一个工具,它为网页中的输入框提供了自动补全功能,使得用户在输入时能快速找到并选择所需的内容,大大提高了输入效率。本篇文章将深入探讨jQuery Suggest插件的使用方法、原理以及如何...
修改网上的代码完成的,使用jquery+JavaScript形式写的,服务端代码用java编写,当然你可以用其他任何语言编写。suggest是MyEclipse的一个工程,直接import既可用。也可以提取里面的文件自己修改
**jQuery 实例5:仿 Google Suggest 自动补全** 在网页开发中,提供自动补全功能能够极大地提升用户体验,尤其是在搜索或者输入框输入时。Google 的搜索建议就是这一功能的经典应用,它能够根据用户输入的关键词...
jQuery 自动补全插件(jQuery UI Autocomplete)是实现这一功能的强大工具,它基于流行的 jQuery JavaScript 库,提供了简单而灵活的接口来创建高效的自动补全效果。 ### 一、jQuery UI Autocomplete 基本概念 ...
**Ajax仿Google Suggest数据库版**是基于Ajax技术实现的一种搜索建议功能,它模拟了Google搜索引擎在用户输入关键字时实时显示搜索建议的效果。这个项目主要使用Java作为后端语言,结合Ajax技术,为前端用户提供流畅...
本项目“模拟GoogleSuggest自动补全功能”旨在通过Ajax实现与Google搜索相似的实时建议效果,提高用户体验。下面我们将深入探讨Ajax的基础概念、工作原理以及如何应用于创建自动补全功能。 Ajax的核心思想是利用...
首先,"jquery 自动补全 例子"是指使用jQuery库来创建一个自动补全的功能,这种功能通常用于在用户输入文本时提供匹配建议。这在网页设计中是非常实用的特性,尤其对于有大量可选项或需要快速查找的场景。 "jquery ...
虽然是演示,但是并不是HelloWorld那种不实用的例子,而是包含两个经典的应用:用户名检测和Google Suggest自动完成。 两个例子都做得比较细,样式也用的比较多,所以一定是可以用于实际项目中的,希望对大家有帮助...
在IT行业中,自动补全功能已经成为了开发人员和用户日常工作中不可或缺的一部分,它极大地提高了代码编写和信息搜索的效率。本文将重点介绍一种强大的自动补全提示组件——Kissy Suggest,它是一个基于JavaScript的...
在信息技术领域,中文输入法的拼写自动补全功能是一项重要的用户体验提升技术。它能够帮助用户快速、准确地输入文本,尤其对于输入速度较慢或者不太熟悉汉字输入的用户来说,这个功能尤为重要。本工程通过结合lucene...
在C#编程中,"文本框自动完成"和"自动补全"功能是提升用户界面交互体验的重要元素,尤其在需要用户输入特定信息时。这个示例代码将帮助开发者实现这一功能,使得用户在文本框中输入时能够快速匹配到预设的建议列表,...