jquery ajax 实现谷歌搜索效果
2011-03-27 10:42
429 查看
完成的功能 如：
第步一新建一个web工程：autoCompleteStart
二 向工程新添搜索页面 如：
JQueryAutoComplete.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQueryAutoComplete.html</title>
<script type="text/javascript" src="Jslib/jquery.js"></script>
<script type="text/javascript" src="Jslib/jqueryauto.js"></script>
</head>
<body>
<input type="text" id="word">
<input type="button" value="提交"/></br>
<div id="auto"></div>
</body>
</html>
三 新建一个servlert com.test.autocom.sAutoComplete.java
package com.test.autocom;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("serial")
public class AutoComplete extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String world = request.getParameter("world");
request.setAttribute("world", world);
//在Ajax的请求当中它不返回一个页面，只返回它所请求的数据，所以也可以称作为数据层
request.getRequestDispatcher("worldxml.jsp").forward(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
四 配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>AutoCompleteStart</servlet-name>
<servlet-class>com.test.autocom.AutoComplete</servlet-class>
</servlet>
<servlet>
<servlet-name>AutoComplete</servlet-name>
<servlet-class>com.test.autocom.AutoComplete</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AutoCompleteStart</servlet-name>
<url-pattern>/autoCompleteStart</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>AutoComplete</servlet-name>
<url-pattern>/AutoComplete</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
新建一个worldxml.jsp页面用于返回 定义查询数据的内容
<%@ page language="java" contentType="text/xml; charset=utf-8"%>
<%
String word = (String)request.getAttribute("world");
%>
<worlds>
<%if("absolute".startsWith(word)){%>
<world>absolute</world>
<%}%>
<%if("anyone".startsWith(word)){%>
<world>anyone</world>
<%}%>
<%if("anything".startsWith(word)){%>
<world>anything</world>
<%}%>
<%if("apple".startsWith(word)){%>
<world>apple</world>
<%}%>
<%if("abandom".startsWith(word)){%>
<world>abandom</world>
<%}%>
<%if("breach".startsWith(word)){%>
<world>breach</world>
<%}%>
<%if("break".startsWith(word)){%>
<world>break</world>
<%}%>
</worlds>
在webRoot目录下新建一个Jslib目录并在这个目录拷入jquery.js使用jquery必须的文件
在这个目录下新建jqueryauto.js 这个js文件里面完成js的触发方法的操作内容如下：
//用于定位键盘上下时，保证返回的数据条有光亮的部分
var heightLightIndex = -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()+2+"px");
//给文本添加键盘按下并弹起的事件
wordInput.keyup(function(event){
var myEvent = event || window.event;
var keyCode =myEvent.keyCode;
//8，46是退格键和删除键
if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){
var worldText = $('#word').val();
if(worldText != ""){
//取消上次未完成都的延迟操作
clearTimeout(timeoutid);
timeoutid = setTimeout(function(){
$.post("AutoComplete",{world:worldText},function(data){
var jqueryObj = $(data);
var worldNodes = jqueryObj.find("world");
var autoNode = $('#auto');
autoNode.html("");
//each中的第一参数就是所遍历这个数组的下标
worldNodes.each(function(i){
var wordNode = $(this);
var newDivNode = $('<div>').attr("id",i);
newDivNode.html(wordNode.text()).appendTo(autoNode);;
newDivNode.mouseover(function(){
if(heightLightIndex != -1){
$('#auto').eq(heightLightIndex).css("background-color","white");
}
heightLightIndex = $(this).attr("id");
$(this).css("background-color","red");
});
newDivNode.mouseout(function(){
$(this).css("background-color","white");
});
newDivNode.click(function(){
var newDivNodeText = $(this).text();
heightLightIndex = -1;
$("#word").val(newDivNodeText);
$('#auto').hide();
});
});
if(worldNodes.length>0){
$('#auto').show();
}else{
$('#auto').hide();
heightLightIndex = -1;
}
},"xml");
},500);
}else{
$('#auto').hide();
heightLightIndex = -1;
}
}else if(keyCode == 38 || keyCode == 40){
//如果输入的是向上 键
if(keyCode == 38 ){
var autoNodes = $('#auto').children("div");
if(heightLightIndex != -1){
autoNodes.eq(heightLightIndex).css("background-color","white");
heightLightIndex--;
}else{
heightLightIndex = autoNodes.length-1;
}
autoNodes.eq(heightLightIndex).css("background-color","red");
}
//向下 键
if(keyCode == 40 ){
var autoNodes = $('#auto').children("div");
if(heightLightIndex != -1){
autoNodes.eq(heightLightIndex).css("background-color","white");
}
heightLightIndex++;
if(heightLightIndex == autoNodes.length){
heightLightIndex = 0;
}
autoNodes.eq(heightLightIndex).css("background-color","red");
}
}else if(keyCode == 13){
if(heightLightIndex != -1){
var contentText = $('#auto').hide().children("div").eq(heightLightIndex).text();
heightLightIndex = -1;
$("#word").val(contentText)
}else{
alert("文本框中的["+$("#word").val()+"]被提交了");
$('#auto').hide();
//在某个节点上get(0)返回本来的dom对象 在dom对象上让文本失去焦点
$("#word").get(0).blur();
}
}
});
$("input[type='button']").click(function(){
alert("文本框中的["+$("#word").val()+"]被提交了");
});
});
第步一新建一个web工程：autoCompleteStart
二 向工程新添搜索页面 如：
JQueryAutoComplete.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQueryAutoComplete.html</title>
<script type="text/javascript" src="Jslib/jquery.js"></script>
<script type="text/javascript" src="Jslib/jqueryauto.js"></script>
</head>
<body>
<input type="text" id="word">
<input type="button" value="提交"/></br>
<div id="auto"></div>
</body>
</html>
三 新建一个servlert com.test.autocom.sAutoComplete.java
package com.test.autocom;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("serial")
public class AutoComplete extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String world = request.getParameter("world");
request.setAttribute("world", world);
//在Ajax的请求当中它不返回一个页面，只返回它所请求的数据，所以也可以称作为数据层
request.getRequestDispatcher("worldxml.jsp").forward(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
四 配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>AutoCompleteStart</servlet-name>
<servlet-class>com.test.autocom.AutoComplete</servlet-class>
</servlet>
<servlet>
<servlet-name>AutoComplete</servlet-name>
<servlet-class>com.test.autocom.AutoComplete</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AutoCompleteStart</servlet-name>
<url-pattern>/autoCompleteStart</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>AutoComplete</servlet-name>
<url-pattern>/AutoComplete</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
新建一个worldxml.jsp页面用于返回 定义查询数据的内容
<%@ page language="java" contentType="text/xml; charset=utf-8"%>
<%
String word = (String)request.getAttribute("world");
%>
<worlds>
<%if("absolute".startsWith(word)){%>
<world>absolute</world>
<%}%>
<%if("anyone".startsWith(word)){%>
<world>anyone</world>
<%}%>
<%if("anything".startsWith(word)){%>
<world>anything</world>
<%}%>
<%if("apple".startsWith(word)){%>
<world>apple</world>
<%}%>
<%if("abandom".startsWith(word)){%>
<world>abandom</world>
<%}%>
<%if("breach".startsWith(word)){%>
<world>breach</world>
<%}%>
<%if("break".startsWith(word)){%>
<world>break</world>
<%}%>
</worlds>
在webRoot目录下新建一个Jslib目录并在这个目录拷入jquery.js使用jquery必须的文件
在这个目录下新建jqueryauto.js 这个js文件里面完成js的触发方法的操作内容如下：
//用于定位键盘上下时，保证返回的数据条有光亮的部分
var heightLightIndex = -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()+2+"px");
//给文本添加键盘按下并弹起的事件
wordInput.keyup(function(event){
var myEvent = event || window.event;
var keyCode =myEvent.keyCode;
//8，46是退格键和删除键
if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){
var worldText = $('#word').val();
if(worldText != ""){
//取消上次未完成都的延迟操作
clearTimeout(timeoutid);
timeoutid = setTimeout(function(){
$.post("AutoComplete",{world:worldText},function(data){
var jqueryObj = $(data);
var worldNodes = jqueryObj.find("world");
var autoNode = $('#auto');
autoNode.html("");
//each中的第一参数就是所遍历这个数组的下标
worldNodes.each(function(i){
var wordNode = $(this);
var newDivNode = $('<div>').attr("id",i);
newDivNode.html(wordNode.text()).appendTo(autoNode);;
newDivNode.mouseover(function(){
if(heightLightIndex != -1){
$('#auto').eq(heightLightIndex).css("background-color","white");
}
heightLightIndex = $(this).attr("id");
$(this).css("background-color","red");
});
newDivNode.mouseout(function(){
$(this).css("background-color","white");
});
newDivNode.click(function(){
var newDivNodeText = $(this).text();
heightLightIndex = -1;
$("#word").val(newDivNodeText);
$('#auto').hide();
});
});
if(worldNodes.length>0){
$('#auto').show();
}else{
$('#auto').hide();
heightLightIndex = -1;
}
},"xml");
},500);
}else{
$('#auto').hide();
heightLightIndex = -1;
}
}else if(keyCode == 38 || keyCode == 40){
//如果输入的是向上 键
if(keyCode == 38 ){
var autoNodes = $('#auto').children("div");
if(heightLightIndex != -1){
autoNodes.eq(heightLightIndex).css("background-color","white");
heightLightIndex--;
}else{
heightLightIndex = autoNodes.length-1;
}
autoNodes.eq(heightLightIndex).css("background-color","red");
}
//向下 键
if(keyCode == 40 ){
var autoNodes = $('#auto').children("div");
if(heightLightIndex != -1){
autoNodes.eq(heightLightIndex).css("background-color","white");
}
heightLightIndex++;
if(heightLightIndex == autoNodes.length){
heightLightIndex = 0;
}
autoNodes.eq(heightLightIndex).css("background-color","red");
}
}else if(keyCode == 13){
if(heightLightIndex != -1){
var contentText = $('#auto').hide().children("div").eq(heightLightIndex).text();
heightLightIndex = -1;
$("#word").val(contentText)
}else{
alert("文本框中的["+$("#word").val()+"]被提交了");
$('#auto').hide();
//在某个节点上get(0)返回本来的dom对象 在dom对象上让文本失去焦点
$("#word").get(0).blur();
}
}
});
$("input[type='button']").click(function(){
alert("文本框中的["+$("#word").val()+"]被提交了");
});
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
- android 使用Path实现搜索动态加载动画效果
- 实现类似google搜索效果，文本框输入智能提示，（经过改进 支持多个文本框的效果）
- js实现搜索框智能提示上下移动效果
- dwr和jquery实现谷歌关键字搜索
- asp.net+js实现的ajax sugguest搜索提示效果
- android_文本框实现搜索和清空效果
- jquery Ajax 实现加载数据前动画效果
- 原生javascript实现分页效果+搜索功能
- Android文本框实现搜索和清空效果
- Zend Framework框架实现类似Google搜索分页效果
- vs2008 asp.net ajax控件实现百度，谷歌智能搜索
- 兼容谷歌、火狐、IE7.0以上浏览器div+css实现的带有蒙版的半透明弹窗效果[xyytit]
- jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
- 手把手教你如何运用强大的谷歌自定义搜索功能来实现你的自定义搜索站之用谷歌自定义搜索实现网盘搜索引擎第一篇
- Domino下实现仿Google搜索提示效果
- jQuery ajax实现顶一下，踩一下效果
- jquery Ajax 实现加载数据前动画效果的示例代码
- Hack in Lucene.Net之为什么无法在搜索时统计分类下相关结果数或者实现Group By效果
- AJAX实现百度搜索栏效果