- 浏览: 717576 次
- 性别:
- 来自: 嘉兴
文章分类
- 全部博客 (386)
- Struts1.1 (2)
- Database (18)
- Core Java (15)
- Log4j (4)
- SSH (0)
- Dao (1)
- Architecture Design (1)
- References (2)
- Eclipse&MyEclipse (10)
- Hibernate (7)
- Spring (8)
- JavaMail (1)
- Data Structure And Algorithm (48)
- Struts 2 (2)
- SSI (1)
- SSL (2)
- JSTL (1)
- EJB3 (2)
- NET (2)
- XML (2)
- Components (2)
- Ant (3)
- Multi Thread (1)
- Performance Monitoring (1)
- Web Server (17)
- Oracle (1)
- jQuery (8)
- Regular Expression (1)
- Weblogic (1)
- Exception (1)
- Security (2)
- File Manipulation (1)
- JavaScript (12)
- JVM (2)
- HTML&DIV&CSS (4)
- Android (10)
- Beyond GFW (0)
- Business (0)
- SVN (6)
- 虚拟主机 (1)
- Virtual Host (3)
- My mentality (5)
- OS (15)
- ISPMP (3)
- Magento (5)
- Jsoup&HttpClient (7)
- LINUX (9)
- Database Design (0)
- Power Designer (1)
- TaobaoOpenPlatform (2)
- C/C++ (3)
- Maven (11)
- Quartz (1)
- Load Balance (1)
- Zabbix (4)
- Product&Business (1)
- Pay Interface (1)
- Tomcat (2)
- Redis (1)
- 集群 (1)
- Session (1)
- 共享Session (1)
- Jedis (1)
- jenkins (1)
- 持续集成 (1)
- Web前端 (1)
最新评论
-
aqq331325797:
特意注册账号上来说一句。牛逼!
swagger2.2.2 与 spring cloud feign冲突 -
KitGavinx:
跨顶级域名怎么保持sessionid一致?
Tomcat7集群共享Session 基于redis进行统一管理 -
jaychang:
dujianqiao 写道HI ,能否给一个完整的demo 啊 ...
淘宝订单同步方案 - 丢单终结者 -
GGGGeek:
找了一会儿,感觉mybatis应该没有这种操作,直到发现博主的 ...
mybatis collection list string -
dujianqiao:
HI ,能否给一个完整的demo 啊 ?
淘宝订单同步方案 - 丢单终结者
大概要实现的内容
这是一个很简单的示例,服务器端只是用了一个jsp页面,返回的类型为xml。先讲下是怎么回事,就是在浏览器端,通过ajax请求,发送一串英文字母,服务器端通过比较,返回具有相同前缀的英文单词。就这么个意思。
工程是在IntelliJ IDE中完成的。做前端开发感觉用IntelliJ比较方便,因为对于写javascript的话,有函数名的提示。
本例提供下载。望各位提出宝贵意见哈。
一、客户端JSP页面
<%-- Created by IntelliJ IDEA. User: JayChang Date: 2010-11-22 Time: 8:33:11 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>AutoComplete-Sample</title> <link type="text/css" rel="stylesheet" href="./css/default.css"> <script type="text/javascript" src="./jslib/jquery-1.4.2.js"></script> <script type="text/javascript" language="javascript"> //高亮的索引 var highLightIndex = -1; //超时的标识(对用户连续快速按下键盘的事件做延时处理,只对用户在500ms内最后一次请求,让其生效) var timeoutId; $(document).ready(function(){ init(); $('#auto_txt').bind('keyup',processKeyup); }); /** * 处理键盘按下后弹起的事件 * @param event */ function processKeyup(event){ var myEvent = event || windows.event; var keyCode = myEvent.keyCode; //输入是字母,或者退格键则需要重新请求 if((keyCode >= 65 && keyCode <= 90) || keyCode == 8){ //以下两行代码是为了防止用户快速输入导致频繁请求服务器 //这样便可以在用户500ms内快速输入的情况下,只请求服务器一次 //大大提高服务器性能 highLightIndex = -1; clearTimeout(timeoutId); timeoutId = setTimeout(processAjaxRequest,500); //处理上下键(up,down) }else if(keyCode == 38 || keyCode == 40){ processKeyUpAndDown(keyCode); //按下了回车键 }else if(keyCode == 13){ processEnter(); } } /*** * 初始化弹出框列表的位置,大小 */ function init(){ $('#auto_div').hide(); var pos = $('#auto_txt').position(); var topPosition = pos.top+$('#auto_txt').height()+7; var leftPosition = pos.left; $('#auto_div').offset({top:topPosition,left:leftPosition}); $('#auto_div').width($('#auto_txt').width()); //$('#auto_div').css('position','absolute'); } /** * 处理Ajax请求 * @param data */ function processAjaxRequest(){ $.ajax({ type:"post", //http请求方法,默认:"post" url:"data.jsp", //发送请求的地址 data:"reqWord="+$('#auto_txt').val(), dataType:"xml", //预期服务器返回的数据类型 success:processAjaxResponse }); } /** * 处理Ajax回复 * @param data Ajax请求得到的返回结果为dom文档对象 */ function processAjaxResponse(data){ $('#auto_div').html('').show(); var xml = $(data); var words = xml.find('word'); for(var i = 0 ; i < words.length ; i ++){ var word_div = $('<div></div>'); word_div.html(words.eq(i).text()); word_div.hover(fnOver,fnOut); word_div.click(getAutoText); $('#auto_div').append(word_div); } } /** * 处理鼠标滑过 */ function fnOver(){ //alert($(this)); changeToWhite(); $(this).css('background-color','pink'); //alert($(this).index()); highLightIndex = $(this).index(); //下面一行注释掉了,百度搜索也没这功能,就是鼠标移动时,跟着改变搜索框的内容 //$('#auto_txt').val($('#auto_div').children().eq(highLightIndex).html()); } /** * 处理鼠标移除 */ function fnOut(){ $(this).css('background-color','white'); } /** * 得到自动填充文本 */ function getAutoText(){ //有高亮显示的则选中当前选中当前高亮的文本 if(highLightIndex != -1){ $('#auto_txt').val($(this).html()); $('#auto_div').html('').hide(); } } /** * 处理按下Enter键 * @param keyCode */ function processEnter(){ if(highLightIndex != -1){ $('auto_txt').val($('#auto_div').children().eq(highLightIndex).html()); $('#auto_div').html('').hide(); } } /** * 处理按上下键的情况 */ function processKeyUpAndDown(keyCode){ var words = $('#auto_div').children(); var num = words.length; if(num <= 0) return; changeToWhite(); highLightIndex = ((keyCode != 38 ? num + 1:num - 1)+highLightIndex) % num; words.eq(highLightIndex).css('background-color','pink'); $('#auto_txt').val(words.eq(highLightIndex).html()); } /** * 如果有高亮的则把高亮变白 */ function changeToWhite(){ if(highLightIndex != -1){ $('#auto_div').children().eq(highLightIndex).css('background-color','white'); } } </script> </head> <body> 自动完成示例 <input type="text" id="auto_txt"><input type="button" value="提交"> <div style="border-width:1px;" id="auto_div"></div> </body> </html>
二、作为服务器端的JSP,返回的是XML
这里稍作解释,为了方便起见,在服务器端只是很简单的处理,返回有相同前缀的英文单词。没有对空格等复杂的搜索条件作处理,本例主要还是侧重于浏览器端的JavaScript。
<%-- Created by IntelliJ IDEA. User: JayChang Date: 2010-11-22 Time: 8:33:22 To change this template use File | Settings | File Templates. --%> <%@page contentType="text/xml; charset=UTF-8"%> <% String reqWord = request.getParameter("reqWord"); System.out.println(reqWord); %> <words> <%if("absolute".startsWith(reqWord)){%> <word>absolute</word> <%}%> <%if("air".startsWith(reqWord)){%> <word>air</word> <%}%> <%if("apple".startsWith(reqWord)){%> <word>apple</word> <%}%> <%if("amaze".startsWith(reqWord)){%> <word>amaze</word> <%}%> <%if("bat".startsWith(reqWord)){%> <word>bat</word> <%}%> <%if("bicycle".startsWith(reqWord)){%> <word>bicycle</word> <%}%> <%if("bite".startsWith(reqWord)){%> <word>bite</word> <%}%> <%if("bottle".startsWith(reqWord)){%> <word>bottle</word> <%}%> <%if("cat".startsWith(reqWord)){%> <word>cat</word> <%}%> <%if("carry".startsWith(reqWord)){%> <word>carry</word> <%}%> <%if("castle".startsWith(reqWord)){%> <word>castle</word> <%}%> </words>
三、CSS样式
#auto_div{ position:absolute; border-width:1px; border:1px #808080 solid; }
- AutoComplete.rar (102.9 KB)
- 下载次数: 517
评论
2 楼
jaychang
2014-03-25
zjqwll 写道
不知道为啥,输入后任何反应都没有,QQ85583755
需要用一个JSP容器,把那个JSP文件放在TOMCAT中
1 楼
zjqwll
2014-03-14
不知道为啥,输入后任何反应都没有,QQ85583755
发表评论
-
jQuery实现目录树
2014-05-30 21:23 1898<!--不支持IE--> <html& ... -
jQuery选择器总结
2014-04-10 10:29 691jQuery 的选择器可谓之强大无比,这里简单地总结一下常 ... -
jquery选择器详解
2013-06-25 15:23 1310通配符: $("input[id^='c ... -
js读写Cookie
2011-01-14 17:47 1089String.prototype.trim = functio ... -
json格式化,统一格式,前端与后端的矛盾
2011-01-10 17:24 1507转自:http://www.okajax.com/a/2009 ... -
使用jQuery对表格的操作,组织JSON字符串
2010-10-09 08:31 3257有时候我们需要对表格的行进行上移,下移,增加,删除的操作,使用 ... -
使用jQuery选中所有同组的checkbox
2010-09-09 13:10 3149jQuery在页面获取checkbox数组时: ...
相关推荐
jQuery搜索框自动提示代码基于jquery.1.8.2.js制作,利用JsonpAjax.js制作搜索框输入文字提示下拉框代码,ajax数据调用的是百度文字库。
修改网上的代码完成的,使用jquery+JavaScript形式写的,服务端代码用java编写,当然你可以用其他任何语言编写。suggest是MyEclipse的一个工程,直接import既可用。也可以提取里面的文件自己修改
NULL 博文链接:https://dsmart-30buy.iteye.com/blog/1485351
类似百度下拉提示 模拟select下拉框 jquery插件 自动提示框 下拉框 本插件依赖于jquery的插件,类似于百度下拉提示框
模仿百度下拉提示框, 自动完成 下拉提示框Ajax+ASP.NET+Jquery)(IE、FF兼容
是一个由HTML5与jQuery共同实现的表单输入自动完成的例子,当用户输入的时候,随着字符的输入,会自动匹配输入结果,以下拉的方式显示出匹配项,与百度搜索框的下拉提示十分相似,这一款由HTML5技术实现,可方便移植...
html5结合jquery实现的搜索框提示代码,也就是实现仿百度搜索的下拉框,仿淘宝购物搜索的下拉提示,当用户输入搜索内容的时候,会自动下拉出相关的搜索内容项,若选中这些选项,则会自动填充到搜索框中,提升人性化...
jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用;兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流...
jquery版搜索框自动补全,智能提示,可连接数据库(适用于.net,java,php等多种语言)支持中,英文,数字智能提示
今天突然想给本站做个搜索页面,这样用户可以通过搜索...jquery+php实现搜索框自动提示 下面先主要讲解原理: 在search.html页面中,用户在搜索框内输入“j”时,使用javascript获取搜索框的文本内容,到数据库中查找相
内容索引:脚本资源,jQuery,搜索提示,自动完成 又一个jQuery 搜索框提示,很好用,至于功能不用多介绍了吧,百度、Google搜索首页都在用,类似Windows的自动完成功能,可以提示下拉框输入的内容。 注意:本例子只...
里给大家分享的效果是像百度的搜索框一样,当用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便,增加用户体验。
6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越火线游戏网 8.JS经典3款风格QQ客服在线浮动右侧与左侧代码 9.JS精简网页音乐播放器 浮动在页面...
(1) 在建立搜索框的时候, value 的值应该是关键字传值, 而不是搜索栏提示. 或许你会说, 很多人都将提示作为搜索栏的初始内容, 但我认为是不好的. 而 Google 和百度都是将上次搜索的关键字作为搜索栏初始化内容的. ...
本文实例为大家分享了jQuery自动文字提示功能,供大家参考,具体内容如下 需要在项目中实现动态添加,删除输入框,每个框里面都要有文字提示。 js部分: //自动完提示 function tip(obj) { $( obj )....
16.当输入框失去焦点时,提示框会自动隐藏 ######V1.8解决问题############ 17.解决了鼠标无法选择的问题 ****************************************************************** 文件使用说明: 在需要使用的页面...
readme: 本文件记录了suggestion.js文件的功能使用说明: 代码如下: /* * 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示,提高了用户体验;...
程序后台即将完善,目前尚未完全完成,客服系统会陆续更新完善! 程序简单,修改方便,功能强大。 竖版的客服界面,仿腾讯咨询界面 QQ登录,QQ登录后可以保存聊天记录,下次登录自动提取上次聊天...
客服可自定义聊天信息框中广告图片客服可以发送邀请,邀请后客户接收页面显示邀请客服名称并且抖动及声音提示!对接状态为3种(在线访问网址状态,开启聊天窗口状态,已经与客服对接状态),未读消息数量。绑定客户聊天...