Jquery和ajax开发案例之---自动补全输入框

来源：互联网发布：数据库实验报告编辑：程序博客网时间：2024/06/03 22:57

案例(浮动窗口、动态股票信息、弹出菜单、可编辑的表格、自动补全输入框)下载地址：

http://download.csdn.net/detail/zl594389970/7218687

效果图：

html:代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><title>JQuery实例：输入时自动提示</title><script type="text/javascript"  src="js/jquery-1.3.1.js"></script> <script type="text/javascript"  src="js/jqueryauto.js"> </script></head><body>Enter或点击：保存选择内容；鼠标移动或上下按键：选择保存内容<br/>自动补全输入框(只提示a或b开头)：<input type="text" id="word"><input type="button" value="提交" ><br/><div id="auto"></div></body></html>

jqueryauto.js代码：

//自动补全框//表示当前高亮的节点var highlightindex = -1;$(document).ready(function() {var wordNode = $("#word");var offset = wordNode.offset();//自动补全框影藏var autoNode =$("#auto").width(wordNode.width()+4).css("position","absolute").css("left",offset.left).css("top",offset.top+wordNode.height()+5+"px");autoNode.hide().css("border","1px black solid");//给文本框添加键盘按下并弹起事件wordNode.keyup(function(event) {//处理文本框中的键盘事件var myEvent = event || window.event;var keycode = myEvent.keyCode;//取键值，查询javascript键盘表，查看对应键值，或者通过alert(event.keyCode)查看键值//alert(keycode);//当输入字母和删除键时响应事件if( keycode >= 65 && keycode <=90 || keycode == 8 || keycode ==46){//1首先获取文本框中的内容var wordText = wordNode.val();//内容不等于空时发送请求if( wordText.trim() != ""){//2将文本框中的内容发送给服务器$.post("autoComplete",{word:wordText},function(data){//将dom对象data转换成JQuery对象var jqueryobj = $(data);//找到所有的word节点var wordNodes =jqueryobj.find("word");//先清空已有内容autoNode.html("");//遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中wordNodes.each(function(i) {//获取单词内容var wordNode  = $(this);//新建div节点，将单词内容加入到新建节点中//将新建节点加入到弹出框节点中    //新建div节点var divNode = $("<div>").css("id",i);divNode.html(wordNode.text()).appendTo(autoNode);//鼠标移动到上面事件divNode.mouseover(function() {$(this).css("background-color","red");highlightindex= i;});//鼠标移出事件divNode.mouseout(function() {$(this).css("background-color","white");highlightindex= -1;});//点击事件,当点击时将div中内容填充到文本框中divNode.click(function() {$("#word").val($(this).text());autoNode.hide();highlightindex= i;});});if( wordNodes.length > 0){autoNode.show();highlightindex = -1;}},"xml");}else{autoNode.hide();}}else if( keycode ==38 || keycode == 40){ //如果输入的是向上38向下40按键var autoNodes = autoNode.children("div")if( keycode == 38){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) {                //向下                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 comText = autoNode.hide().children("div").eq(highlightindex).text();                highlightindex = -1;                //文本框中的内容变成高亮节点的内容                wordNode.val(comText);}else{                 autoNode.hide(); //下拉框没有高亮内容                 alert("文本框中的[" +wordNode.val() + "]被提交了");                 //让文本框失去焦点                 $("#word").get(0).blur();}}});//给提交按钮添加事件，表示文本框中的数据被提交$("input[type='button']").click(function() {alert("文本框的["+$("#word").val()+"]被提交了");});});

AutoCompleteAction控制类代码：

package com.liang.action;import java.io.StringWriter;import org.apache.struts2.ServletActionContext;import org.dom4j.Document;import org.dom4j.DocumentHelper;import org.dom4j.Element;import org.dom4j.io.OutputFormat;import org.dom4j.io.XMLWriter;import com.opensymphony.xwork2.ActionSupport;/** * 自动补全 *  */public class AutoCompleteAction extends ActionSupport {public String execute() {// 表示页面传过来的字符串，用于和服务器端的单词进行匹配String word = ServletActionContext.getRequest().getParameter("word");// 将请求转发给视图层（注AJAX重，这个所谓视图层不返回页面，只返回数据，所以也叫数据层//返回数据格式如下/* * <words> *  <word>absolute</word>  *  <word>anyone</word>  *  <word>apple</word> * <word>abandon</word>  * <word>breach</word>  * <word>break</word> * <word>boolean</word>  * </words> *///生成xml格式数据Document document = DocumentHelper.createDocument();Element root = document.addElement("words");if (word != null && !word.equals("")) {if ("absolute".startsWith(word)) {root.addElement("word").addText("absolute");}if ("anyone".startsWith(word)) {root.addElement("word").addText("anyone");}if ("apple".startsWith(word)) {root.addElement("word").addText("apple");}if ("abandon".startsWith(word)) {root.addElement("word").addText("abandon");}if ("breach".startsWith(word)) {root.addElement("word").addText("breach");}if ("break".startsWith(word)) {root.addElement("word").addText("break");}if ("boolean".startsWith(word)) {root.addElement("word").addText("boolean");}if ("boy".startsWith(word)) {root.addElement("word").addText("boy");}}OutputFormat format = OutputFormat.createPrettyPrint();StringWriter sw = new StringWriter();XMLWriter writer;//保存xml数据到request域中try {writer = new XMLWriter(sw, format);writer.write(document);writer.close();String wordsxml = sw.toString();wordsxml=wordsxml.substring(wordsxml.indexOf("<w"), wordsxml.lastIndexOf(">")+1);sw.close();ServletActionContext.getRequest().setAttribute("wordsxml",wordsxml);} catch (Exception e) {e.printStackTrace();}//返回到wordxml.jsp端return SUCCESS;}}

wordxml.jsp页面端代码：

 <%--ajax的自动补全实例与传统应用的视图层不同，这个jsp返回的是xml数据，因此contentType的值是text/xml --%><%@ page contentType="text/xml; charset=UTF-8" language="java" %>${wordsxml}

sturts.xml配置信息：

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"    "http://struts.apache.org/dtds/struts-2.3.dtd"><struts><package name="test" extends="struts-default" ><action name="getstock" class="com.liang.action.StockAction"> <result >stockjson.jsp</result></action><action name="autoComplete" class="com.liang.action.AutoCompleteAction"> <result >wordxml.jsp</result></action></package></struts>

0 1