`
gg19861207
  • 浏览: 182641 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery实现仿google自动补齐

阅读更多

js文件:

//var autoNode = $("#auto")是错误的,因为在外边只能声明变量,不能初始化变量
//因为即使初始化了变量也是不好使的
var autoNode;
var wordNode; //文本框
var autoChildNodes;
var highlightindex = -1;//文本框高亮显示的元素的索引,-1表示没有高亮元素,0则表示第一元素高亮,1表示第二个元素高亮,以此类推
//设置成-1是因为在数组列表div中,第一个元素索引是0
$(document).ready(function(){
wordNode = $("#word");
autoNode = $("#auto");
autoNode.hide();
// css("border","1px black solid");
// .css("position","absolute")
// .css("top",offset.height + wordNode.height)
// .css("left",offset.left)
// .css("height",offset.height);;


//处理文本框中的键盘事件
$("#word").keyup(function(event){
//判断用户按下的是哪个键
var myEvent = event || window.event;
var keycode = myEvent.keyCode;
//判断用户按下的键是否是小写 “a” 到 大写 "Z"
if(keycode >= 65 && keycode <= 90 || keycode == 8 || keycode == 46)//8,46是del键和backspace键,也要向服务器发送数据
{
//1.首先获取id为word的文本框中的内容
var wordText = $("#word").val();
if(wordText != ""){
//2.向服务器发送数据,并接受返回数据,对之进行处理
$.post("AutoComplete",{word:wordText},function(data){
//在处理新接受的数据时,把上一次的内容要清空
autoNode.html("");
//3.1将dom对象转化为jquery对象
var jqueryObj = $(data);
//3.2找到所有的word节点
var wordNodes = jqueryObj.find("word");
//3.3遍历所有的word节点,取出单词内容,并把每个节点追加到id为auto的div中
wordNodes.each(function(i){
//4.1取出单词内容
var text = $(this).text();

//4.2新创建一个div节点,并设置节点的内容
var divNode = $("<div>").attr("id",i);
divNode.html(text);
//4.3把新建的div节点追加到对话框中
divNode.appendTo(autoNode);
//找到所有符合条件的auto节点的<div>子节点
autoChildNodes = $("#auto").children("div");
//鼠标进入事件
divNode.mouseover(function(){
if(highlightindex != -1)
{ autoChildNodes.eq(highlightindex).css("background","white");

}
$(this).css("background","red");
highlightindex = i;

});
//鼠标滑出事件
divNode.mouseout(function(){
$(this).css("background","white");
highlightindex = -1;
});
//鼠标点击事件,是click函数,而不是onclick函数
divNode.click(function(){

var clicktext = $(this).html();
wordNode.val(clicktext);
autoNode.hide();
highlightindex = -1;
alert("数据" + clicktext +"被发送!");

});

});

var offset = $("#word").offset();
autoNode.show()
.css("border","1px black solid")
.css("position","absolute")
.css("top",offset.top + wordNode.height()+4)
.css("left",offset.left)
.css("width",wordNode.width()+2);
},"xml");
}else{
autoNode.hide();
//对话在关闭的时候就要恢复highlightindex的值为默认值-1
highlightindex = -1;
}
}else if(keycode == 38 || keycode == 40 ){ //判断用户按下的是否是向上键(38),还是向下键(40)

if(keycode == 38)
{//用户按的是向上的键头
if(highlightindex == -1)
{
highlightindex = autoChildNodes.length-1;
}else{
autoChildNodes.eq(highlightindex).css("background","white");
if(highlightindex == 0)
{
autoChildNodes.eq(highlightindex).css("background","white");
highlightindex= autoChildNodes.length-1
}
else
{
highlightindex--;
}


}
autoChildNodes.eq(highlightindex).css("background","red");
}
else if(keycode == 40)
{//用户按的是向下的键头

if(highlightindex == autoChildNodes.length-1)
{
autoChildNodes.eq(highlightindex).css("background","white")
highlightindex = 0;
}else{
autoChildNodes.eq(highlightindex).css("background","white");
highlightindex++;
}
autoChildNodes.eq(highlightindex).css("background","red");
}
}
else if(keycode == 13)
{//用户按下的是回车键

//下拉框有高亮内容
if(highlightindex != -1)
{
var text = autoChildNodes.eq(highlightindex).html();
wordNode.val(text);
autoNode.hide();
//对话在关闭的时候就要恢复highlightindex的值为默认值-1
highlightindex = -1;
alert("数据" + text +"被发送!" );

}
else
{
alert("数据" + wordNode.val()+"被发送!" );
autoNode.hide();
//对话在关闭的时候就要恢复highlightindex的值为默认值-1
highlightindex = -1;
}


//下拉框没有高亮内容
}
});
//给按钮添加事件,因为button没有id属性,所以可以
// 通过$("input[type='button']")的方法来访问到该节点
$("input[type='button']").click(function(){
alert("数据"+ $("#word").val()+"被提交!");
});
});

servlet文件:

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;

/**
* Created by IntelliJ IDEA.
* User: lucky
* Date: 2009-8-19
* Time: 13:51:46
* To change this template use File | Settings | File Templates.
*/
public class AutoComplete extends HttpServlet{
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doPost(httpServletRequest, httpServletResponse);
}

protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
String word = httpServletRequest.getParameter("word");
//???将字符床保存在request对象中
httpServletRequest.setAttribute("word",word);
//将请求转发给视图层,(注意在Ajax中,视图层并不返回页面,只返回数据,所以也可称为数据层)
httpServletRequest.getRequestDispatcher("wordxml.jsp")
.forward(httpServletRequest, httpServletResponse);
}
}

word.jsp数据文件:

<%--
Created by IntelliJ IDEA.
User: lucky
Date: 2009-8-19
Time: 14:01:13
To change this template use File | Settings | File Templates.
--%>
<!-- 因为是数据层,所以这里contentType的类型是text/xml-->
<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<%
String word = request.getParameter("word");
%>
<words>

<%

if("absolute".startsWith(word)){

%>

<word>absolute</word>
<%
}
%>

<%
if("abstarct".startsWith(word)){

%>
<word>abstarct</word>
<%
}
%>

<%
if("anyone".startsWith(word)){

%>
<word>anyone</word>

<%
}
%>


<%
if("anything".startsWith(word)){

%>
<word>anything</word>

<%
}
%>

<%
if("anywhere".startsWith(word)){

%>
<word>anywhere</word>

<%
}
%>


<%
if("brank".startsWith(word)){

%>
<word>brank</word>
<%
}
%>

<%
if("break".startsWith(word)){

%>
<word>break</word>
<%
}
%>


<%
if("blank".startsWith(word)){

%>
<word>blank</word>


<%
}
%>
</words>

html文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>自动补全实例</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryauto.js"></script>
</head>
<body>
<input type="text" id="word"/>
<input type="button" value="提交"/><br/>
<div id="auto"></div>
</body>
</html>

分享到:
评论

相关推荐

    jquery实现的带有分页效果的仿google的自动补齐效果

    在本项目中,我们看到有`jqueryajax.rar`这个文件,这很可能包含了实现自动补齐功能所需的jQuery插件或自定义脚本。jQuery的Ajax方法(如`$.ajax()`、`$.get()`、`$.post()`等)用于向服务器发送请求,获取匹配的...

    jQuery实现仿Google首页拖动效果的方法

    jQuery实现仿Google首页拖动效果涉及的主要知识点包括: 1. jQuery基础: jQuery是一个快速、简洁的JavaScript库,它通过简化HTML文档遍历、事件处理、动画和Ajax交互,使Web开发变得更加方便。实现拖动效果,重点...

    jQuery实现自动补齐

    "jQuery实现自动补齐"这个主题,主要涉及的是如何利用jQuery来创建一个功能强大的输入框自动完成功能,这在网页表单设计中十分常见,尤其对于搜索框或用户输入数据的场景,可以显著提升用户体验。 自动完成功能通常...

    基于Bootstrap和JQuery实现仿PC文件管理系统源码.zip

    基于Bootstrap和JQuery实现仿PC文件管理源码.zip基于Bootstrap和JQuery实现仿PC文件管理源码.zip基于Bootstrap和JQuery实现仿PC文件管理源码.zip基于Bootstrap和JQuery实现仿PC文件管理源码.zip基于Bootstrap和...

    改进版 jquery 仿百度谷歌自动补全输入(支持中文)

    标题“改进版 jquery 仿百度谷歌自动补全输入(支持中文)”涉及到的是一个基于jQuery的前端开发技术,旨在实现类似百度和谷歌搜索框的自动补全功能,而且这一版本特别优化了对中文字符的支持。在网页交互设计中,...

    jquery实例5:仿Google Suggest自动补齐

    **jQuery 实例5:仿 Google Suggest 自动补全** 在网页开发中,提供自动补全功能能够极大地提升用户体验,尤其是在搜索或者输入框输入时。Google 的搜索建议就是这一功能的经典应用,它能够根据用户输入的关键词...

    Jquery实现Google自动补全效果

    **jQuery实现Google自动补全效果** 在Web开发中,用户输入的实时提示功能,也称为自动补全(Autocomplete)或智能搜索,极大地提升了用户体验。本篇将介绍如何使用jQuery库来实现类似Google搜索那样的自动补全效果...

    Jquery实现仿搜索引擎(百度、谷歌)文本框自动补全插件

    在本文中,我们将深入探讨如何使用jQuery来实现一个仿照百度和谷歌搜索引擎的文本框自动补全插件。这个插件的主要目标是提供用户友好的输入体验,通过预测和建议可能的搜索词来提高搜索效率。 ### jQuery简介 ...

    jquery实现的网页自动播放声音

    描述部分则简单介绍了文档内容,即通过jQuery实现自动播放声音的方法,并为需要此功能的开发者提供了参考。 本知识点主要围绕以下几个方面展开:Web音频播放的兼容性问题、HTML5中的标签、jQuery的使用技巧、以及...

    Jquery实现仿搜索引擎文本框自动补全插件

    jQuery 是一个广泛使用的 JavaScript 库,它提供了丰富的功能来简化前端开发,包括实现自动补全插件。本文将详细讲解如何使用 jQuery 和相关插件创建一个仿搜索引擎的文本框自动补全功能。 首先,我们需要引入 ...

    JQuery实现仿sina新浪微博新鲜事滚动

    JQuery实现仿sina新浪微博新鲜事滚动

    jquery仿google自动提示

    在实现自动提示功能时,jQuery提供了一些核心功能,如DOM操作、事件绑定和Ajax请求。 ### 2. jQuery选择器 首先,我们需要获取用户的输入。jQuery的选择器允许我们根据元素的ID、类、属性等进行选择。例如,如果...

    jquery实现仿qq相册功能

    在本文中,我们将深入探讨如何使用jQuery来实现一个仿QQ相册的功能,这是一个常见的Web开发需求,特别是在构建个人或企业网站时。QQ相册因其直观的界面和丰富的交互性而广受欢迎,因此学习如何复制其核心特性对于...

    jquery模仿google自动补全案例

    在本文中,我们将深入探讨如何使用jQuery来实现一个模仿Google搜索的自动补全功能。这个功能常见于许多网站,能够极大地提升用户体验,帮助用户快速找到他们想要搜索的关键词。我们将基于给定的"jquery模仿google...

    AJAX学习总结(九)---Jquery实例:仿googlesuggest自动补全功能

    在本文中,我们将深入探讨AJAX技术在JavaScript库jQuery中的应用,特别是通过一个实战案例——仿谷歌搜索建议(Google Suggest)的自动补全功能。这个功能广泛应用于各种搜索框,能够极大地提升用户体验,使用户在...

    前端+jQuery+实现烟花特效

    前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...

    jQuery实现的产品自动360度旋转展示特效源码.zip

    本资源"jQuery实现的产品自动360度旋转展示特效源码.zip"提供了一种利用jQuery创建360度产品旋转展示效果的方法。这种特效在电商网站上特别常见,能增强用户体验,使用户可以全方位地查看产品细节。 首先,jQuery的...

Global site tag (gtag.js) - Google Analytics