Jquery和ajax开发案例之---自动补全输入框_自动补全输入框一般用于什么开发场景-优快云博客

本文链接：https://blog.youkuaiyun.com/zl594389970/article/details/24121095

本文通过实例演示了如何利用Jquery和Ajax技术来创建一个自动补全输入框功能。详细讲解了HTML布局、Jquery脚本、后台控制类以及XML数据来源的实现步骤，附带了相关代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

http://download.youkuaiyun.com/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>