- 浏览: 214927 次
- 性别:
- 来自: 河南省
文章分类
最新评论
-
l379101003:
引用[code="java"]
spring mvc 接入微信公众平台 注解方式的写法 -
jtmjx:
你好,我也做了一个,可是Get与微信对接校验的可以,但是POS ...
spring mvc 接入微信公众平台 注解方式的写法 -
ileson:
windows mysql服务问题很奇怪,有可能建议大家迁移到 ...
MySql 使用总结
原文地址:http://www.jb51.net/article/28075.htm
原文的代码格式及注释超赞!!!
-------------------------------------------------------
我主要修复了几个小bug:
修复了:下拉框宽度无法控制的bug;
修复了:改变调用方式后,焦点改变一次重复生成一次隐藏div 的bug;
修复了:ajax 请求jsp中文乱码,让其可以支持中文。
1、html页面代码
2、jsp页面,主要返回json ,你可以用任何你知道的语言。
后记:从中学习了不少东西,jquery很好用啊。。。。这个值得深入研究。。。
原文的代码格式及注释超赞!!!
-------------------------------------------------------
我主要修复了几个小bug:
修复了:下拉框宽度无法控制的bug;
修复了:改变调用方式后,焦点改变一次重复生成一次隐藏div 的bug;
修复了:ajax 请求jsp中文乱码,让其可以支持中文。
1、html页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>搜索词自动完成</title> <style type="text/css"> .autocomplete{ border: 1px solid #9ACCFB; background-color: white; text-align: left; } .autocomplete li{ list-style-type: none; } .clickable { cursor: default; } .highlight { background-color: #9ACCFB; } </style> <script type="text/javascript" src="./javascript/jquery-1.6.2.min.js"></script> <script type="text/javascript"> function autoComplete(e,datas){ //取得输入框JQuery对象 var $searchInput = $('#'+e); //关闭浏览器提供给输入框的自动完成 $searchInput.attr('autocomplete','off'); //将多余的模拟的div干掉。 if($(".autocomplete").size()>0){ $(".autocomplete").detach(); } //创建自动完成的下拉列表,用于显示服务器返回的数据,插入在搜索按钮的后面,等显示的时候再调整位置 var $autocomplete = $('<div class="autocomplete"></div>').hide().insertAfter('#'+e); //清空下拉列表的内容并且隐藏下拉列表区 var clear = function(){ $autocomplete.empty().hide(); }; //注册事件,当输入框失去焦点的时候清空下拉列表并隐藏 $searchInput.blur(function(){ setTimeout(clear,200); }); //下拉列表中高亮的项目的索引,当显示下拉列表项的时候,移动鼠标或者键盘的上下键就会移动高亮的项目,想百度搜索那样 var selectedItem = null; //timeout的ID var timeoutid = null; //设置下拉项的高亮背景 var setSelectedItem = function(item){ //更新索引变量 selectedItem = item ; //按上下键是循环显示的,小于0就置成最大的值,大于最大值就置成0 if(selectedItem < 0){ selectedItem = $autocomplete.find('li').length - 1; }else if(selectedItem > $autocomplete.find('li').length-1 ) { selectedItem = 0; } //首先移除其他列表项的高亮背景,然后再高亮当前索引的背景 $autocomplete.find('li').removeClass('highlight').eq(selectedItem).addClass('highlight'); }; var ajax_request = function(){ //ajax服务端通信 $.ajax({ 'url':'./returnJson.jsp', //服务器的地址 {如果不在同一个项目也可以:全路径http://ip:端口号/returnJson.jsp} 'data':{'search-text':$searchInput.val()}, //参数 'dataType':'json', //返回数据类型 'type':'POST', //请求类型 'success':function(data){ //var data=eval("(" +data+ ")"); if($(data).size()>0) { //遍历data,添加到自动完成区 $.each(data, function(index,term) { //创建li标签,添加到下拉列表中 $('<li></li>').text(term).appendTo($autocomplete).addClass('clickable').hover(function(){ //下拉列表每一项的事件,鼠标移进去的操作 $(this).siblings().removeClass('highlight'); $(this).addClass('highlight'); selectedItem = index; },function(){ //下拉列表每一项的事件,鼠标离开的操作 $(this).removeClass('highlight'); //当鼠标离开时索引置-1,当作标记 selectedItem = -1; }).click(function(){ //鼠标单击下拉列表的这一项的话,就将这一项的值添加到输入框中 $searchInput.val(term); //清空并隐藏下拉列表 $autocomplete.empty().hide(); }); });//事件注册完毕 //设置下拉列表的位置,然后显示下拉列表 var ypos = $searchInput.position().top; var xpos = $searchInput.position().left; //alert("下拉列表原点坐标:("+xpos+","+ypos+")"); $autocomplete.width($searchInput.width()); //$searchInput.css('width') $autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"}); setSelectedItem(0); //显示下拉列表 $autocomplete.show(); } } }); }; //对输入框进行事件注册 $searchInput.keyup(function(event) { //字母数字,退格,空格 if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode ==32) { //首先删除下拉列表中的信息 $autocomplete.empty().hide(); clearTimeout(timeoutid); timeoutid = setTimeout(ajax_request,100); }else if(event.keyCode == 38){ //上 //selectedItem = -1 代表鼠标离开 if(selectedItem == -1){ setSelectedItem($autocomplete.find('li').length-1); }else { //索引减1 setSelectedItem(selectedItem - 1); } event.preventDefault(); }else if(event.keyCode == 40) { //下 //selectedItem = -1 代表鼠标离开 if(selectedItem == -1){ setSelectedItem(0); }else { setSelectedItem(selectedItem + 1); //索引加1 } event.preventDefault(); } }).keypress(function(event){ if(event.keyCode == 13) { //enter键 //列表为空或者鼠标离开导致当前没有索引值 if($autocomplete.find('li').length == 0 || selectedItem == -1) { return; } $searchInput.val($autocomplete.find('li').eq(selectedItem).text()); $autocomplete.empty().hide(); event.preventDefault(); } }).keydown(function(event){ if(event.keyCode == 27 ) { //esc键 $autocomplete.empty().hide(); event.preventDefault(); } }); //注册窗口大小改变的事件,重新调整下拉列表的位置 $(window).resize(function() { var ypos = $searchInput.position().top; var xpos = $searchInput.position().left; $autocomplete.width($searchInput.width()); //$searchInput.css('width') $autocomplete.css({'position':'relative','left':xpos-10 + "px",'top':ypos-16+"px"}); //控件下拉div的位置 }); } </script> </head> <body onload=""> <label for="search-text">请输入关键词</label> <input type="text" id="search-text" name="search-text" style="" onfocus="autoComplete('search-text','');" /> </body> </html>
2、jsp页面,主要返回json ,你可以用任何你知道的语言。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% response.setContentType("text/xml"); response.setCharacterEncoding("utf-8"); request.setCharacterEncoding("UTF-8"); String[] words = { "a", "abc", "apple", "abstract", "an", "bike", "byebye", "beat", "be", "bing", "come", "cup", "class", "calendar", "china","中","中国" ,"中国人","中华人民共合国中央人民政府!","1","12","123"}; if (request.getParameter("search-text") != null) { String key = request.getParameter("search-text"); if (key.length() != 0) {//关键字不为空,将符合条件 的拼成json 返回。 String json = "["; for (int i = 0; i < words.length; i++) { if (words[i].startsWith(key)) { json += "\"" + words[i] + "\"" + ","; } } json = json.substring(0, json.length() - 1 > 0 ? json .length() - 1 : 1); json += "]"; //System.out.println("json:" + json); out.println(json); } } %>
后记:从中学习了不少东西,jquery很好用啊。。。。这个值得深入研究。。。
发表评论
-
js css 前端调试工具使用记录
2014-12-21 11:43 703一、常用调试工具; 1、chrome 调试工具devt ... -
web app native app hybrid app 简单区分
2014-10-31 19:54 851一、web app 简单入门 android we ... -
css3 学习
2014-10-21 01:25 6801、圆角、阴影、背景效果 .... 2、css3 ... -
web app 前端框架---使用
2014-10-01 15:31 918一、框架简介 1、angular angular.js mo ... -
前端 在线编辑器
2014-10-01 15:23 683较常用的是:jsfiddle.net http://runj ... -
jquery validate 前端验证框架
2014-08-28 18:58 18307前言:之前写web项目还自己写表单验证,想想真是太天真了。jq ... -
百度地图api 标注小例子
2014-08-13 02:17 876web app 开发:demo <html lang= ... -
HTML5 FormData 进行文件jquery ajax 上传 到又拍云
2014-08-03 11:08 37838html5 新东西:FormData 可以提交二进制数据。 ... -
web 打印
2011-10-20 20:23 10741、用了一个网络打印控件,在别的机器上可以,在本机上报: 引用 ... -
Jquery 总结
2011-05-23 23:39 1088虽然jQuery对象是包装DOM对象后产生的,但是jQuery ... -
项目中 js 备忘
2010-03-15 15:46 1164document.getElementsByName(); ... -
Ajax/json/js 学习备忘
2010-04-29 14:07 7091、什么是闭包: 闭包就是能够读取其他函数内部变量的函数。 ... -
javascript 积累
2011-03-28 15:36 836/** * 判断是不是enter键 ... -
一个弄到深夜的东西
2011-03-17 01:44 774先为自己汗一个。记录下来,以防下次丢人。 var jsonS ... -
javascript oop
2011-03-11 12:00 845function class(){ this.v ... -
window.open & opener
2011-03-11 11:45 816parent.html <!DOCTYPE html ... -
可以放在任何位置的图片无缝滚动js代码
2011-01-13 19:40 1617<script> //<!--代码开始-- ... -
静态页面之间传值
2010-12-08 14:42 823a.html <html> <head&g ... -
jquery+json
2010-12-04 21:07 991<!DOCTYPE html PUBLIC " ...
相关推荐
"仿百度搜索" 的标签表明了项目的目标是模拟百度搜索的用户体验,这可能包括了实时的搜索建议、模糊匹配、搜索结果即时展示等功能。为了达到这个效果,开发者需要对前端和后端的交互有深入理解,以及对搜索算法和...
"jquery的搜索框输入提示"是一个基于jQuery实现的功能,它旨在提高用户体验,特别是在用户进行搜索时提供实时的建议或匹配结果。这个功能通常用于搜索引擎或者网站的搜索框,如百度和谷歌,当用户输入关键词时,会...
在网页开发中,为了提升用户体验,常常需要模拟各种交互效果,比如模拟百度下拉提示框的功能。这个功能可以通过使用jQuery插件来实现,它能够帮助开发者创建一个与百度搜索框类似的自动提示效果,使得用户在输入时能...
标题 "jquery引导 类似google-百度提示" 指向的是一个使用jQuery库实现的搜索提示功能,类似于谷歌和百度搜索引擎在用户输入时显示相关搜索建议的交互效果。这个功能通常用于提高用户体验,减少用户输入,并帮助他们...
现在,编写jQuery代码以监听用户输入并展示自动提示。这里我们使用`keyup`事件来检测用户在搜索框中的输入变化: ```javascript $(document).ready(function() { var searchInput = $('#searchInput'); var ...
- **输入提示**:为提高用户体验,可以在用户输入时显示可能的匹配项,如使用`autocomplete`插件。 - **性能优化**:对于大数据集,可以考虑使用懒加载或分页加载技术,避免一次性加载所有数据。 - **错误处理**:...
标题中的“仿百度 谷歌下拉提示 纯jquery 实现”指的是利用JavaScript库jQuery来创建一种功能,该功能模拟了百度和谷歌搜索引擎在用户输入时显示下拉建议的效果。这种效果能够提高用户体验,因为用户无需完整输入...
在本项目中,开发者通过 `.NET` 后端与前端 `jQuery` 配合,模拟了类似 Google 和百度的搜索提示效果。 **1. jQuery Autocomplete 插件** `jQuery UI` 自带了一个名为 `autocomplete` 的插件,它可以监听用户在...
本项目是使用JSP技术实现的一个Ajax自动提示功能,其目的是模拟百度搜索引擎的搜索提示效果。 首先,我们需要理解Ajax(Asynchronous JavaScript and XML)的核心理念。Ajax并非一种新技术,而是通过JavaScript、...
【jQuery模仿百度登录窗口弹出层特效源码.zip】是一个基于jQuery库的代码资源,用于实现类似百度登录窗口的弹出层效果。这个压缩包包含了实现这一特效所需的基本文件和说明文档。 首先,jQuery是一个广泛使用的...
标题“智能提示-仿百度”指的是一个开发项目或者功能实现,其主要目标是模拟百度搜索引擎在用户输入时的智能提示功能。这种功能通常被称为自动补全或预测搜索,它能够根据用户输入的部分关键词,快速提供可能的搜索...
本篇将详细探讨“输入提示”这一主题,以及如何通过Ajax2模拟百度提示的效果。 首先,我们要理解什么是输入提示。输入提示,也称为自动补全或自动完成,是当用户在输入框中输入文字时,系统根据已有的数据集或历史...
**jQuery Autocomplete** 是一个非常流行的JavaScript库,用于在输入框中实现自动补全功能,类似于百度搜索框的体验。这个功能广泛应用于各种网站,帮助用户快速找到他们想要输入的信息,提高了用户界面的交互性和...
在这个名为“人工智能-项目实践-搜索引擎-模仿百度首页开发的纯静态页面”的项目中,开发者旨在构建一个类似于百度首页的静态网页,但不依赖于jQuery插件,而是利用JavaScript和其他相关技术来实现功能。这个项目...
**Ajax 实现仿百度搜索提示(Suggestion)** 在网页开发中,为了提供更好的用户体验,我们经常需要实现类似百度搜索的实时提示功能。这个功能在用户输入查询词时,能够实时展示与输入相关的建议,无需点击搜索按钮...
5. **客服状态显示**:模拟百度商桥的在线/离线状态,可能通过服务器返回的数据来动态更新客服状态图标或文字。 6. **自定义事件和插件**:为了封装和复用代码,开发者可能会创建自定义的jQuery事件或插件,提高...
一款jquery实现表单输入提示的Autobox插件(基于jquery.ui) 29.一款美化表单下拉列表、复选框等的jquery combobox插件实例 30.站长必备jquery实现combox自动筛选,高亮显示功能 4)菜单 1.jquery+CSS超炫丽横向...
本项目"仿百度模拟ajax下拉框搜索"就是基于jQuery实现的一个功能,旨在模仿百度搜索框的智能提示功能,当用户在输入框中输入关键词时,能够实时通过Ajax从服务器获取并显示相关的搜索建议,同时支持用户使用键盘的上...
1. **百度搜索下拉代码**:这个案例模拟了百度搜索框的下拉提示功能,通过监听用户输入并动态生成相关建议,提高了用户体验。核心是利用`keyup`事件捕获用户输入,并通过AJAX请求获取匹配数据,然后使用`append()`...
在这个“Ajax和Jquery部分学习代码及数据库.rar”压缩包中,包含了作者在学习过程中编写的代码示例,涉及到与数据库交互的实际操作,如百度搜索提示功能的模拟、注册账号时的用户名可用性检测,以及利用jQuery实现的...