自动补全提示(转)
程序员文章站
2022-06-01 12:23:36
...
做了一个简单的根据用户输入前面字母,给出相应的补全提示:
1 显示页面JqueryAutocomplete.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jquery实例:自动补全</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="jqueryLib/jquery-1.4.1.js"></script>
<script type="text/javascript" src="jqueryLib/jqueryauto.js"></script>
</head>
<body>
<input type="text" id="word" />
<input type="button" value="提交" /><br/>
<div id="auto"></div><!-- 弹出框 -->
</body>
</html>
2 使用到的jqueryauto.js:
//自动补全框最开始应该隐藏起来 //表示当前高亮的节点 var highlightindex = -1; var timeoutId; $(document).ready(function(){ var wordInput = $("#word"); var wordInputoffset = wordInput.offset(); $("#auto").hide().css("border","1px black solid").css("position","absolut") .css("top",wordInputoffset.top + wordInput.height() + 5 + "px") .css("left",wordInputoffset.left + "px") .width(wordInput.width() + 2); //给文本框添加键盘按下并弹起的时间 wordInput.keyup(function(event) { //处理文本框中的键盘事件 var myEvent = event || window.event; var keyCode = myEvent.keyCode; //如果输入的是字母,应该将文本框中的最新的信息发送给服务器 //如果输入的是退格键(键值是8)或者删除键(键值是46),应该将文本框中的最新的信息发送给服务器 if(keyCode >=65 && keyCode <=90 || keyCode == 8 || keyCode == 46) { //1.获取文本框里的内容 var wordText = $("#word").val(); var autoNode = $("#auto"); if(wordText != "") { //2.将文本框的内容发送给服务器 //对上次未完成的延时操作进行取消 clearTimeout(timeoutId); //对于服务器端进行延迟500毫秒,避免快速打字造成的频繁请求服务器 timeoutId = setTimeout(function(){ $.post("AutoComplete",{word:wordText},function(data) { //将dom对象data转换成jquery对象 var jqueryObj = $(data); //找到所有的word节点 var wordNodes = jqueryObj.find("word"); //遍历所有的word节点,取出单词内容,然后将单词内容添加到弹出框中 //需要清空原来的内容 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(highlightindex != -1) { $("#auto").children("div").eq(highlightindex) .css("background-color","white"); } //记录新的高亮索引 highlightindex = $(this).attr("id"); //鼠标进入的节点高亮 $(this).css("background-color","green"); }); //增加鼠标移除事件,取消当前节点的高亮 newDivNode.mouseout(function() { //取消鼠标移除节点的高亮 $(this).css("background-color","white"); }); //增加鼠标点击事件,可以进行补全 newDivNode.click(function() { //取出高亮节点的内容 var comTest = $(this).text(); $("#auto").hide(); highlightindex = -1; //文本框中的内容变成高亮节点的内容 $("#word").val(comTest); }); }); //如果服务器端有数据返回,则显示弹出框 if(wordNodes.length > 0) { autoNode.show(); }else { autoNode.hide(); //弹出框隐藏的同时,高亮节点的值也至成-1 highlightindex = -1; } },"xml"); },500); } else { autoNode.hide(); highlightindex = -1; } }else if(keyCode ==38 || keyCode == 40){ //如果输入的是向上38或向下40键 if(keyCode == 38) { //向上键 var autoNodes = $("#auto").children("div"); if(highlightindex != -1) { //如果原来存在高亮节点,则背景颜色改成白色 autoNodes.eq(highlightindex).css("background-color","white"); highlightindex--; }else { highlightindex = autoNodes.length -1; } if(highlightindex == -1) { //如果修改索引值以后index变成-1,则将索引值指向最后一个元素 highlightindex = autoNodes.length - 1; } // 让现在高亮的内容变成红色 autoNodes.eq(highlightindex).css("background-color","red"); } if(keyCode == 40) { //向下键 var autoNodes = $("#auto").children("div"); if(highlightindex != -1) { //如果原来存在高亮节点,则背景颜色改成白色 autoNodes.eq(highlightindex).css("background-color","white"); } highlightindex++; if(highlightindex == autoNodes.length) { //如果修改索引值以后index变成-1,则将索引值指向最后一个元素 highlightindex = 0; } // 让现在高亮的内容变成红色 autoNodes.eq(highlightindex).css("background-color","red"); } }else if(keyCode == 13) { //如果输入的是回车 //下来框有高亮内容 if(highlightindex != -1) { //取出高亮节点的内容 var comTest = $("#auto").hide().children("div").eq(highlightindex).text(); highlightindex = -1; //文本框中的内容变成高亮节点的内容 $("#word").val(comTest); }else { //下拉框没有高亮内容 alert("文本框中的内容["+$("#word").val()+"]被提交了"); $("#auto").hide(); $("#word").get(0).blur(); } } }); //给按钮添加事件,表示文本框的内容被提交 $("input[type='button']").click(function() { alert("文本框中的内容["+$("#word").val()+"]被提交了"); }); })
3 提示数据来源(这里使用的是用jsp生成xml格式数据):
<%--
ajax自动补全实例
--%>
<!--与传统的视图层不同,这个jsp返回的是xml数据因此contentType的值是text/xml-->
<%@ 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>
4 向web.xml文件加入servlet配置信息:
<?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>AutoComplete</servlet-name> <servlet-class>service.AutoComplete</servlet-class> </servlet> <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>
5 使用http://localhost:8080/AutoComplete/JqueryAutocomplete.html便可以看到输入a时的提示信息,源码放在附件里