`

仿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映射文件
评论
发表评论

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

相关推荐

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