`

仿Google自动补全示例

Jquery自动补全 
阅读更多

1. 在MyEclipse中实现示例

Ø 在MyEclipse中新建一个webProject，命名为AjaxDemo

Ø 导入jquery框架，首先从网站上下载jquery，解压文件得到jquery的核心代码（jquery-1.4.2.min.js），在webRoot目录下新建一个jscode文件夹，将jquery-1.4.2.min.js代码copy到jscode文件夹下。

Ø 首先新建一个html页面，命名为JQueryAutoComplete.html,代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>自动补全示例演示</title>

<script type="text/javascript" src="jscode/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="jscode/jqueryauto.js"></script>

</head>

<body>

<center>

<h2>

仿Google自动补全示例

</h2>

<input type="text" id="word" />

<input type="button" value="搜索" />

<br />

</center>

<div id="auto"></div>

</body>

</html>
<!--EndFragment-->

 

以上代码需要注意：首先要在html页面中引用jquery的代码：

 

<script type="text/javascript" src="jscode/jquery-1.4.2.min.js"></script>
<!--EndFragment-->

 

其次对于引入js代码的顺序要注意，先引入jquery代码，再引入自动补全的js实现代码

 

<script type="text/javascript" src="jscode/jqueryauto.js"></script>

 

 

 

 

并在web.xml文件配置：

<servlet>

    <servlet-name>AutoComplete</servlet-name>

    <servlet-class>com.tlj.test.AutoComplete</servlet-class>

  </servlet>

<servlet-mapping>

    <servlet-name>AutoComplete</servlet-name>

<url-pattern>/AutoComplete</url-pattern>

 </servlet-mapping>

 

<!--EndFragment--><!--EndFragment-->

Ø 在webRoot目录下新建一个jsp页面，命名为wordxml.jsp，其代码如下所示：

<%@ page contentType="text/xml;charset=utf-8" language="java" %>

<%

String word=(String)request.getAttribute("word");

%>

<words>

<%if("absolute".startsWith(word)){%>

<word>absolute</word>

<%}%>

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

<word>anyone</word>

<%}%>

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

<word>anything</word>

<%}%>

<%if("apple".startsWith(word)){%>

<word>apple</word>

<%}%>

<%if("abandon".startsWith(word)){%>

<word>abandon</word>

<%}%>

<%if("breach".startsWith(word)){%>

<word>breach</word>

<%}%>

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

<word>break</word>

<%}%>

<%if("boolean".startsWith(word)){%>

<word>boolean</word>

<%}%>

</words>

 

在这段代码中要注意处：第一句中contentType="text/xml;charset=utf-8"，其类型是xml类型。

Ø 自动补全的核心代码是其的js代码，在jscode文件夹下建立jqueryauto.js，代码如下所示：

var hightlightindex = -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());

//给文本框添加键盘按下的事件

wordInput.keyup(function (event) {

//处理文本框中的键盘事件

var myEvent = event || window.event;

var keyCode = myEvent.keyCode;

//如果输入的是字母，应该将文本框中的最新的信息发送给服务器

if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) {

//1.获取文本框中的内容

var wordText = $("#word").val();

if (wordText != "") {

clearTimeout(timeoutId);

    timeoutId = setTimeout(function () {

$.post("AutoComplete", {word:wordText}, function (data) {

var jqueryObj = $(data);

    //找到所有的word节点

var wordNodes = jqueryObj.find("word");

var autoNode = $("#auto");

    //需要清空原来的内容

autoNode.html("");

wordNodes.each(function (i) {

//获取单词内容

var wordNode = $(this);

//新建div节点，将单词内容加入到新建的节点中

//将新建的节点加入到弹出框的节点中

var newDivNode = $("<div>").attr("id", i);

newDivNode.html(wordNode.text()).appendTo(autoNode);

newDivNode.mouseover(function () {

if (hightlightindex != -1) {

                          $("#auto").children("div").eq(hightlightindex)

.css("background-color", "white");

  }

hightlightindex = $(this).attr("id");

$(this).css("background-color", "red");

});

newDivNode.mouseout(function () {

$("this")..css("background-color", "white");

});

newDivNode.click(function () {

var comText = $(this).text();

$("#auto").hide();

hightlightindex = -1;

$("#word").val(comText);

});

});

       //如果服务器端有数据，则显示弹出框

if (wordNodes.length > 0) {

autoNode.show();

} else {

autoNode.hide();

hightlightindex = -1;

}

}, "xml");

}, 500);

//2.将文本框中的内容发送给服务器

} else {

autoNode.hide();

hightlightindex = -1;

}

} else {

if (keyCode == 38 || keyCode == 40) {

//输入是上下键

if (keyCode == 38) {

//向上键

var autoNodes = $("#auto").children("div");

if (hightlightindex != -1) {

autoNodes.eq(hightlightindex).

css("background-color", "white");

hightlightindex--;

} else {

hightlightindex = autoNodes.length - 1;

}

if (hightlightindex == -1) {

hightlightindex = autoNodes.length - 1;

}

autoNodes.eq(hightlightindex).css("background-color", "red");

}

if (keyCode == 40) {

  //向下键

var autoNodes = $("#auto").children("div");

if (hightlightindex != -1) {

autoNodes.eq(hightlightindex)

.css("background-color", "white");

}

hightlightindex++;

if (hightlightindex == autoNodes.length) {

hightlightindex = 0;

}

autoNodes.eq(hightlightindex).css("background-color", "red");

}

} else {

if (keyCode == 13) {

//输入的是回车

if (hightlightindex != -1) {

var comText = $("#auto").hide().children("div")

.eq(hightlightindex).text();

hightlightindex = -1;

$("#word").val(comText);

} else {

$("#auto").hide();

$("#word").get(0).blur();

}

}

}

}

});

});
<!--EndFragment--><!--EndFragment-->
分享到：
| 用myeclipse生成hibernate映射文件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    仿Google百度 自动补全示例

    仿Google百度 自动补全示例，实现效果完全正确

    仿google自动补全 检索建议

    标题中的“仿google自动补全检索建议”是指创建一个类似谷歌搜索框的自动补全功能，它能够在用户输入关键词时，提供与输入内容相关的搜索建议。这个功能在提高用户体验、加快搜索速度方面起到了重要作用。 首先，...

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

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

    仿GoogleSuggest自动补全的功能

    在提供的文件“31_实现仿GoogleSuggest自动补全的功能.avi”中，可能包含了实现这一功能的具体步骤和示例代码。通过观看这个视频教程，你可以学习到如何从头构建这样的功能，包括前端交互逻辑、后端接口设计及其实现...

    AJAX学习总结（九）---Jquery实例：仿googlesuggest自动补全功能

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

    Jquery实现Google自动补全效果

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

    类google、baidu文本输入框自动补全

    本示例聚焦于实现类似Google和百度搜索框那样的自动补全功能，采用jQuery库来辅助开发。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。在实现自动补全功能时，我们可以利用...

    jQuery实现自动补全功能

    在提供的压缩包文件"GoogleSuggest"中，可能包含了一个关于谷歌搜索建议的示例，它展示了如何使用jQuery UI Autocomplete来模拟谷歌搜索的自动补全效果。通过分析和学习这个示例，你可以更深入地理解如何与服务器...

    传智播客Jquery实例(防google自动补全)

    **jQuery 实例详解：防Google自动补全** jQuery 是一个高效、简洁且强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和AJAX交互。在"传智播客Jquery实例(防google自动补全)"的课程中，主要探讨的是...

    Google得自动补全技术

    "模拟googlesugest自动补全功能 - ajax - 雨踪云迹.htm" 这个文件名暗示我们将会学习一个使用Ajax技术来实现Google自动补全功能的示例。Ajax（异步JavaScript和XML）允许网页在不刷新整个页面的情况下与服务器交换...

    类似百度、谷歌的自动补全

    这个"类似百度、谷歌的自动补全"Demo展示了一个如何实现这种功能的方法，主要利用了JavaScript库jQuery。在本文中，我们将深入探讨自动补全的工作原理、jQuery在其中的角色，以及如何构建类似的实现。 自动补全的...

    Jquery自动补全

    jQuery自动补全是一种常见的前端开发技术，用于提升用户体验，特别是在搜索框或输入字段中，它能够根据用户输入的内容实时提供预测建议。这个功能在许多网站和应用中都有所应用，如百度搜索、谷歌搜索等。它能够帮助...

    GoogleSuggest ajax自动补全

    【标题】"GoogleSuggest ajax自动补全"是基于AJAX和jQuery技术实现的一个功能，它主要用于提升用户体验，提供在用户输入时实时显示搜索建议的功能。这个功能在很多搜索引擎和网站中都有应用，比如Google搜索，它能...

    AJAX jquery 模仿谷歌搜索自动补全功能

    在本教程中，我们将深入探讨如何使用AJAX和jQuery实现谷歌搜索式的自动补全功能。自动补全是一种增强用户体验的常见技术，它允许用户在输入查询时获得即时建议，极大地提高了搜索效率。以下是对实现这一功能所需的...

    JQuery Ajax 仿google suggest 自动补全功能 支持中文（jsp / Servlet）

    本示例将深入解析如何使用jQuery Ajax实现一个仿Google Suggest的自动补全功能，特别针对中文输入进行了优化，并且结合了Java后端技术如jsp和Servlet。 首先，让我们理解这个功能的核心概念。Google Suggest的自动...

    仿照谷歌搜索自动补全功能实验

    在IT行业中，自动补全功能是一项非常常见的用户体验优化技术，尤其在搜索引擎中广泛使用，比如谷歌搜索。这个功能能够帮助用户快速找到他们可能想要输入的查询，提高输入效率，减少错误。下面我们将深入探讨实现此类...

    搜索引擎文本框自动补全

    搜索引擎文本框自动补全是一种常见的用户体验优化技术，广泛应用于各种在线搜索平台，如谷歌、百度等。这种功能在用户输入查询关键词时，会预测并显示可能的搜索建议，帮助用户快速找到想要的信息，提高搜索效率。 ...

    android 应用 源代码——自动补全

    在Android应用开发中，"自动补全"是一项重要的功能，它极大地提高了用户的输入效率和体验。这个主题主要涉及Android Studio中的Autocomplete特性，这是一套智能代码补全系统，能够根据用户输入的部分代码预测并提供...

    基于Ajax的自动补全

    在"基于Ajax的自动补全"这一主题中，我们主要探讨的是如何利用Ajax技术实现类似Google搜索框的自动补全功能。Google搜索的自动补全功能能够在用户输入关键字时，根据历史搜索记录、热门搜索等信息，实时提供可能的...

    在自己的网页里套上百度搜索引擎,谷歌搜索引擎,文本框中输入文字会显示下拉提示自动补全文字,点百度一下打开百度显示你搜索的文字.zip

    下面是一个基本的示例，展示了如何使用JavaScript实现百度搜索的自动补全： ```html &lt;!DOCTYPE html&gt; 百度搜索自动补全 &lt;script src="https://api.map.baidu.com/autocomplete/v2/inject.js"&gt;&lt;/script&gt; 请...

Magicbox
Global site tag (gtag.js) - Google Analytics