- 浏览: 1493736 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (523)
- JAVA (334)
- J2EE (18)
- JSP (21)
- JavaScript (14)
- it life (2)
- mobile develop (4)
- UBUNTU (14)
- Algorithm (14)
- DataBase (56)
- Browser/Server (1)
- linux (6)
- fedora (2)
- CSS (1)
- AjAX (3)
- HTML5 (1)
- EJB (1)
- osworkflow (2)
- Java face (5)
- spring (4)
- ICE (1)
- webService (2)
- MongoDB (1)
- JavaThread (4)
- JavaCollections (3)
- Hibernate (2)
- JavaMail (1)
- JavaBasic (1)
- Cache (1)
- https (4)
- DOM4J (1)
- JDOM (0)
- Mybatis (1)
- JUNIT (1)
- eclipse (1)
- easyMock (2)
最新评论
-
yadongliang:
...
自己认为的一些技术点 -
yadongliang:
每次看你头像都看的荷尔蒙分泌失调
WebService的两种方式SOAP和REST比较 (转) -
yadongliang:
hollo 写道一直有这种感觉,盲目的跟风,确实有一些人为了潮 ...
WebService的两种方式SOAP和REST比较 (转) -
welss:
博主,JNative怎么调用dll中的这种方法: int ...
JNative调用DLL -
Java_Antelope:
session.setAttribute和session.getAttribute(
大概要实现的内容
这是一个很简单的示例,服务器端只是用了一个jsp页面,返回的类型为xml。先讲下是怎么回事,就是在浏览器端,通过ajax请求,发送一串英文字母,服务器端通过比较,返回具有相同前缀的英文单词。就这么个意思。
工程是在IntelliJ IDE中完成的。做前端开发感觉用IntelliJ比较方便,因为对于写javascript的话,有函数名的提示。
本例提供下载。望各位提出宝贵意见哈。
一、客户端JSP页面
Html代码 收藏代码
<%--
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 =={
//以下两行代码是为了防止用户快速输入导致频繁请求服务器
//这样便可以在用户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。
Html代码 收藏代码
<%--
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样式
Html代码 收藏代码
#auto_div{
position:absolute;
border-width:1px;
border:1px #808080 solid;
}
【by:http://jaychang.iteye.com/blog/823893】
这是一个很简单的示例,服务器端只是用了一个jsp页面,返回的类型为xml。先讲下是怎么回事,就是在浏览器端,通过ajax请求,发送一串英文字母,服务器端通过比较,返回具有相同前缀的英文单词。就这么个意思。
工程是在IntelliJ IDE中完成的。做前端开发感觉用IntelliJ比较方便,因为对于写javascript的话,有函数名的提示。
本例提供下载。望各位提出宝贵意见哈。
一、客户端JSP页面
Html代码 收藏代码
<%--
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 =={
//以下两行代码是为了防止用户快速输入导致频繁请求服务器
//这样便可以在用户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。
Html代码 收藏代码
<%--
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样式
Html代码 收藏代码
#auto_div{
position:absolute;
border-width:1px;
border:1px #808080 solid;
}
【by:http://jaychang.iteye.com/blog/823893】
- AutoComplete.rar (102.9 KB)
- 下载次数: 36
发表评论
-
Spring官网改版后下载
2014-04-11 10:39 767Spring官网改版后找了好久都没有找到直接下载Jar包的链接 ... -
Java 系统架构设计
2014-03-31 21:18 1479首先分为网关和引擎等多个部分: 第一部分:网关 1、主要负责转 ... -
Java 提高系统性能
2014-03-03 22:22 2610首先是从三方面来提高的,应用层面,服务器端层面,数据库层面。 ... -
javascript 方面的东东
2013-12-05 21:48 937easyUI分页: http://jeasyui.com/d ... -
2013年11月份艺龙旅行网面试题
2013-11-22 23:39 12611.给你两个字符串s1="abc",s2= ... -
国猪555555555
2013-11-22 00:16 1092国足第一招:场地太差,不适应。 国足第二招:场地太好,不适应。 ... -
自己认为的一些技术点
2013-08-14 00:12 12271.rest风格的编程。 2.memcached的命中率低的问 ... -
HttpClient
2013-01-14 23:57 1049package org.abin.lee.test.http; ... -
JAVA单例模式读取properties配置文件
2012-12-16 01:12 2661前段时间出差去做一个数据接口的项目,有很多参数需要从工程中的配 ... -
Java 反射调用方法
2012-10-22 23:52 975package lc.abin.lee.reflect; i ... -
Javascript 实体类构造方法
2012-09-27 17:15 2336<script type="text/java ... -
Java Https单向,双向验证
2012-09-23 22:47 3007https一般来说有单项SSL和双向SSL连接之分。 单项 ... -
Java中的transient,volatile和strictfp关键字
2012-09-12 18:00 831http://www.iteye.com/topic/5295 ... -
Server JBoss v5.0 at localhost was unable to start within 50 seconds.
2012-09-05 11:35 1879[标题]:[转]JBoss was unable to sta ... -
HttpUrlConnection 开发例子
2012-03-25 16:23 3358/*** * * 发送HTTP请求 * @ ... -
Java Enum类型定义的方法
2012-03-12 12:34 2342//枚举接口 package com.abin.info.s ... -
Rational Rose 2003 下载及破解方法
2012-03-06 12:49 1392FROM:http://blog.csdn.net/fengl ... -
使用Spring进行面向切面(AOP)编程
2012-02-22 10:35 23431.aop理论知识 横切性关注点:对哪些方法拦截,拦截后怎么处 ... -
BASE64、MD5、SHA、HMAC几种加密算法
2012-02-21 12:53 8802BASE64编码算法不算是真正的加密算法。 MD5、 ... -
文本文件和二进制文件区别及java中字节流和字符流归纳
2012-02-17 15:48 2989首先在物理上文本文件和二进制文件并没有区别,都是以二进制01的 ...
相关推荐
<!... <... <head> ...meta charset="utf-8" />...仿百度搜索框的联想词提示效果js代码<... 这是一款纯javaScript实现的仿百度搜索框联想词提示代码,搜索框输入文字自动提示相关联想词js特效。
【标题】:“模仿百度搜索框提示效果(源码)”是指一种实现类似百度搜索引擎在用户输入关键词时,自动下拉显示相关搜索建议的技术。这种功能极大地提升了用户体验,减少了用户输入的负担,使得搜索过程更加便捷。 ...
【仿百度搜索框源码】是一个编程项目,旨在实现类似百度搜索框的功能,提供用户友好的搜索体验。在网页设计和开发中,这样的搜索框是关键的交互元素,它不仅需要具备基本的输入验证和搜索功能,还可能涉及到高级特性...
【标题】"仿百度搜索提示框"涉及到的技术和知识点主要包括前端界面设计、后端服务器处理、数据库交互以及异步数据加载。以下是对这些关键领域的详细解释: 1. 前端界面设计: 这部分主要是创建一个与百度搜索框...
在这个实例中,可能会有一个`<title>`标签来设置页面标题为"百度搜索框",以及引用外部CSS和JS文件的`<link>`和`<script>`标签。 2. `<body>`标签:包含网页的实际内容。搜索框通常由`<form>`标签定义,其中包含一...
【标题】:“模仿百度搜索框”这一项目旨在创建一个与百度搜索框...通过以上步骤,我们可以构建一个功能完备且视觉效果良好的“仿百度搜索框”。实际开发中,可能还需要考虑SEO优化、错误处理、用户反馈等更多细节。
模拟实现百度搜索框提示效果,自己用js动态创建、移除div来实现的,很简单 注释详细。
这个项目“用php+ajax写的仿百度谷歌搜索下拉自动提示框效果”旨在实现类似百度和谷歌搜索引擎的实时搜索建议功能。下面我们将详细探讨这个过程涉及的关键知识点。 首先,我们要理解**PHP**(Hypertext ...
在"jQuery仿百度搜索框下拉代码"中,`jiaoben6813`很可能是包含实现此功能的JavaScript代码的文件,可能是一个`.js`文件。这个文件中可能会定义一个函数或者类来处理搜索框的事件,并动态地生成和显示下拉列表。它...
在JavaScript(JS)中实现一个百度搜索框提示功能,是一种常见的前端交互设计,它能够为用户提供实时的搜索建议,提高用户体验。在这个实例中,我们将不依赖数据库,而是使用静态数据或者本地存储来实现搜索提示。这...
同时,我们还需要编写一段JavaScript代码来处理服务器返回的结果,将这些结果显示在搜索框下方的提示列表中。 对于搜索自动提示,通常涉及到的前端技术还包括DOM操作,如使用JavaScript或jQuery来动态创建和更新...
【JS百度搜索框联想词提示代码】是一种使用JavaScript编写的前端技术实现,它主要用于创建一个类似于百度搜索引擎的自动联想提示功能。在用户输入关键词时,该代码能够实时地从预设的数据源中匹配并显示相关的搜索...
本资源"百度搜索框源代码程序源码"提供了一个实现百度搜索框功能的源代码,这对于我们理解搜索引擎前端界面的工作原理、学习网页交互设计以及前端开发技术具有重要的学习价值。 首先,我们要明白的是,这个源代码...
在IT行业中,搜索框的推荐提示功能是一种常见的用户体验优化手段,尤其在大型搜索引擎如百度中,这一功能尤为重要。"百度搜索框推荐提示功能代码.zip"是一个包含实现这一功能的源码压缩包,主要针对的是HTML网页代码...
在这个项目中,搜索框可能采用了百度的风格,以保持品牌一致性,同时考虑了公司员工的操作习惯,可能具有特定的输入提示、自动补全等功能。前端开发可能使用HTML、CSS和JavaScript等技术,其中JavaScript或其库如...
总结来说,通过使用jQuery,我们可以轻松实现一个仿百度搜索框的效果,包括自动提示功能和简洁的样式设计。这只是一个基础示例,实际应用中可能需要连接到服务器获取实时的搜索建议,并对样式进行更多自定义以满足...
这里我们关注的是"Servlet+Ajax实现简易的仿百度搜索框智能提示"这一主题。这个技术组合主要用于创建动态、交互性强的用户体验,尤其是对于搜索功能,它能够实时为用户提供可能的搜索建议,就像百度搜索框那样。以下...