仿百度搜索框，文本框输入值后提示框显示数据(JQuery+Struts2)

最新推荐文章于 2022-07-02 09:33:36 发布

tu451953337

最新推荐文章于 2022-07-02 09:33:36 发布

阅读量6.3k

点赞数

分类专栏： Web前端文章标签：仿百度搜索框提示框

本文链接：https://blog.csdn.net/tu451953337/article/details/38067379

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Auto Prompt</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
			var timeoutObj;
			var index = -1; //记录按上下键后得到的行数
			$(function()
			{
				var textObj = $("#text");
				//文本框按键后触发的事件
				textObj.keydown(function(){
					if(event.keyCode==13) //enter
					{
					
					}
					else if(event.keyCode==38)//up
					{
						//按上键后改变上一行的背景颜色
						changeColor(true);
					}
					else if(event.keyCode==40)//down
					{
						//按下键后改变下一行的背景颜色
						changeColor(false);
					}
				});
				//文本框按键松开后触发的事件
				textObj.keyup(function(){
					//如果文本框被清空，隐藏显示的提示框
					if(textObj.val().length==0)
					{
						hideResult();
					}
				});
				//文本框被点击后触发的事件,调用getData, 传入参数0
				textObj.click(0, getData);
				
				//textObj.change(500, getData);
				//文本框的值被改变后触发的事件,调用getData,传入参数500,不知道为什么上一行代码不能起到相同的作用
				textObj.bind("input propertychange", 500, getData);
				//文档被点击后，隐藏提示框
				$(document).click(function(){
					hideResult();
				});
			});
			
			var isFirst = true; //标记是否选中的是文本框
			var defaultValue; //文本框的输入值
			function changeColor(isUpKey)
			{
				if(isFirst){ //第一次按上下键
					isFirst = false;
					defaultValue = $("#text").val();
				}
				//根据class获取提示框所有的行
				var rows = $(".span");
				var len = rows.length;
				if(index>=0)
				{
					//如果当前行大于等于0，就把当前行的背景颜色恢复
					rows[index].style.backgroundColor="#fff";
				}
				if(isUpKey)
				{
					//按了上键后，如果当前选中的是文本框，移动后应该是最后一行
					//否则选择行往上移动一格，如果当前是第一行，移动后选中的是文本框
					index = index==-1 ? len-1 : index-1;
				}
				else
				{
					//按了下键后，如果当前是最后一行，移动后应该到文本框，即index=-1，
					//否则选择行往下移动一格
					index = index==len-1 ? -1 : index+1;
				}
				if(index>=0)
				{
					//移动后的选中行不是文本框，就将选中行背景颜色改变
					//并将文本框的值设置为当前行的值
					rows[index].style.backgroundColor="#ccc";
					$("#text").val(rows[index].innerHTML);
				}
				else
				{
					//移动后到文本框了，就将文本框的原来值恢复
					//并将选中文本框标记设置为true
					$("#text").val(defaultValue);
					isFirst = true;
				}
			}
			
			function getData(event)
			{
				var textObj = $("#text");
				//如果timeoutObj已经存在，就清除，为了实现在文本框连续按键，在间隔时间较短只发一次请求，不用每输入一个文本就发一次清除
				if(timeoutObj)
				{
					clearTimeout(timeoutObj);
				}
				timeoutObj = setTimeout(function(){
					if(textObj.val().length>0)
					{
						//获取数据，传入文本框的值作参数
						$.get("./struts2/search", {text: textObj.val()}, function(data, status){
							showResult(data);
						});
					}
				}, event.data);//在event.data时间后执行请求，就是事件绑定函数时传入的参数，点击文本框立即加载，输入文本则在500毫秒后加载
			}
			
			function showResult(jsonData)
			{
				index = -1;//设置提示框选中值，即选中了文本框
				var resultObj = $("#result");
				resultObj.show(300);//将提示框div显示出来
				resultObj.css("border","1px solid black");				
				resultObj.html("");//清空提示框里面之前的内容
				var rows = eval(jsonData).rows;//获取json数据
				for(var i=0; i<rows.length; i++)
				{
					var divObj = $("<div>");//创建提示框里一行数据
					divObj.addClass("span");//设置class，方便后面获取提示框里的行
					divObj.html(rows[i].text).appendTo(resultObj);//将这一行添加到提示框里面
					divObj.hover(function(){//设置这一行的hover事件，即进入行改变背景颜色为#ccc，离开行改变背景颜色#fff
						this.style.backgroundColor="#ccc";
					}, function(){
						this.style.backgroundColor="#fff";
					});
					divObj.click(function(event){//设置这一行的click事件，将文本框的值设置当前行的值
						$("#text").val(this.innerHTML);
					});
				}
			}
			//隐藏提示框
			function hideResult()
			{
				index=-1;
				var resultObj = $("#result");
				resultObj.hide(300);
			}
		</script>
	</head>
	<body>
		<input id="text" name="text" />
		<div id="result" style="width:250px"></div>
	</body>
</html>

请求后台struts2实现

struts2配置文件，返回json数据

<?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="search" namespace="/" extends="json-default">
		<action name="search" class="com.struts2.search.SearchAction">
			<result name="success" type="json">
				<param name="root">jsonMap</param>
			</result>
		</action>
	</package>
</struts>

后台java代码，随机生成10个大写字母拼成一行数据

package com.struts2.search;


import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;


public class SearchAction
{
	private Map<String, Object> jsonMap;
	
	private String text;
	
	public String execute()
	{
		jsonMap = new HashMap<String, Object>(5);
		List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
		for(int i=0; i<10; i++)
		{
			Map<String, Object> m = new HashMap<String, Object>();
			m.put("text", getRandomString(text));
			list.add(m);
		}
		jsonMap.put("rows", list);
		System.out.println("success");
		return "success";
	}


	
	public Map<String, Object> getJsonMap()
	{
		return jsonMap;
	}


	public void setJsonMap(Map<String, Object> jsonMap)
	{
		this.jsonMap = jsonMap;
	}
	
	private String getRandomString(String start)
	{
		StringBuilder sb = new StringBuilder(start==null?"":start);
		int i=10;
		Random random = new Random();
		while(i-->0)
		{
			sb.append((char)(random.nextInt(24)+'A'));
		}
		return sb.toString();
	}
	
	public String getText()
	{
		return text;
	}
	
	public void setText(String text)
	{
		this.text = text;
	}
	
}