select火狐浏览器提示偏左_JAVAEE AJAX实现搜素框关键字提示语功能

最新推荐文章于 2022-08-16 08:41:30 发布

陈安研究员

最新推荐文章于 2022-08-16 08:41:30 发布

阅读量117

点赞数

文章标签： select火狐浏览器提示偏左

本文链接：https://blog.csdn.net/weixin_33728584/article/details/113316958

版权

该博客详细介绍了如何使用Ajax、Servlet、JSP和JDBC技术实现搜索框的关键词提示功能。用户输入关键字时，下拉显示相关提示，支持鼠标和键盘选择。文章涵盖了功能需求分析、技术实现细节、数据库设计以及事件处理等关键步骤，包括延迟发送请求以避免频繁请求，以及在Firefox中处理event对象的方法。

摘要由CSDN通过智能技术生成

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索框</title>
<!-- 
		ajax之搜索框关键字提示语：
			功能需求：
				用户在搜索框中输入关键字，然后搜索框下出现下拉选项，提示关键字的提示语
				用户可以使用鼠标进行提示语的选择，也可以使用键盘的上下键进行选择。
			技术分析：
				ajax+servlet+jsp+jdbc
			功能分析（思路）：
				1、创建搜索界面（搜索框和提示语div和搜索按钮）
				2、给搜索框添加onkeyup事件，键盘弹起时发送ajax请求
					请求当前用户输入的信息对应的提示语数据
				3、将提示语数据填充到搜索框下的div中
					问题：
						现在用户在搜索框单击键盘任何一个键都会发起ajax请求，请求提示语数据
					解决：
						判断用户单击的键盘的按键符合要求再发请求
					解决：
						获取用户按了那个键。使用event对象进行按键的键盘码值获取。		
					
				4、实现使用鼠标选择提示语
				5、实现使用键盘的上下键选择提示语
				6、实现鼠标和键盘的联动操作
				7、将提示语的div进行隐藏，当有提示语的时候显示隐藏的div
			完善：
				问题：现在只要用户在搜索框中出现键盘点击动作，都会触发键盘事件的执行。
					而只要数据符合要求，都会发送ajax请求，请求提示语信息。点击一次都发一次。
					但是其实只需要最后一次进行请求发生即可
				解决：
					使用延迟发送即可
				使用：
					window.setTimeOut();
				问题2；
					event对象在火狐浏览器中使用window.event获取不到
				解决2：
					在火狐浏览器使用传参的方式给event赋值			
			数据库设计：
				创建表：（data）  存储常用的关键字数据
					关键字编号：id
					关键字数据：title
					说明：remark
				添加测试数据：要求前期测试数据为英文单词
				SQL语句设计：查询一用户党庆搜索框数据开头的关键字
					select * from data where title like '?%';
				注意：
					测试数据不要太多
			数据库实现：在数据库创建表即可，并添加测试数据
							
	 -->
<!-- 引入jQuery文件 -->
<script type="text/javascript" src="js/j.js"></script>
<script type="text/javascript">
	//创建计数器
	var count = -1;
	//声明变量记录
	var id;
	//页面加载成功完成页面的初始化
	$(function() {
		//给搜索框添加键盘弹起事件
		$("#search").keyup(
				function(event) {///火狐方式获取对象
					var reg=/^s+$/g;
					//获取event对象
					var eve = window.event||event;
					//获取用户当前点击的键盘架的键盘值
					var code = eve.keyCode;
					//判断code的值是否符合要求
					if (code >= 65 & code <= 90 || code == 8||code == 32) {
						//获取用户在当前搜索框的数据
						var sd = $("#search").val();
						//判断值是否为空
						if (sd == ""||reg.test(sd)) {
							return;
						}
					//清除之前的将要发送的请求
					window.clearTimeout(id);
					id=window.setTimeout(function(){					
							//发起ajax请求，请求当前用户搜索框的提示语信息
							$.get("search", {
								sdata : sd
							}, function(data) {
								//使用eval方法将数据转换为对象
								eval("var sd=" + data);
								//获取提示语div元素对象
								var dataDiv = $("#dataDiv");
								//请客所有内容
								dataDiv.empty();
								//显示隐藏的div
								if(sd.length>0){
									dataDiv.css("display", "")
								}else{
									dataDiv.css("display", "none")
								}								
								//将提示语数据填充到div中
								for (var i = 0; i < sd.length; i++) {
									dataDiv.append("<div style='padding:5px'>"
											+ sd[i].title + "</div>");
								}
								//给提示与添加鼠标选择效果
								$("#dataDiv div").mouseover(function() {
									//清空所有提示语的div的背景颜色
									$("#dataDiv div").css("background-color", "");
									//将当前选择的div背景颜色变为灰色
									$(this).css("background-color", "gray");
									//
									count=$(this).index();
								})
								//给提示语div添加单击事件，用来选择提示语
								$("#dataDiv div").click(function() {
									//将当前div的提示语数据改变到搜索框内
									$("#search").val($(this).html());
									//隐藏当前填充所有提示语的div
									$("#dataDiv").css("display", "none");

								})

							})
						},1000);
					}
					
					//判断用户点击的是否是键盘的下键
					if (code == 40) {
						//判断是否与提示语
						if (("#dataDiv div").length > 0) {
							//判断
							count=count<$("#dataDiv div").length-1?++count:0;
							//清空原有颜色
							$("#dataDiv div").css("background-color", "");
							//让提示语div中第一个提示语的背景色变为灰色
							$("#dataDiv div:eq(" + count + ")").css(
									"background-color", "gray");
							//将选择的提示语改变到搜索框中
							$("#search").val($("#dataDiv div:eq(" + count + ")").html());
						}
					}
					//判断用户点击的是否是键盘的上键
					if (code == 38) {
						//判断是否与提示语
						if (("#dataDiv div").length > 0) {
							//判断
							count=count>0?--count:$("#dataDiv div").length-1;
							//清空原有颜色
							$("#dataDiv div").css("background-color", "");
							//让提示语div中第一个提示语的背景色变为灰色
							$("#dataDiv div:eq(" + count + ")").css(
									"background-color", "gray");
							//将选择的提示语改变到搜索框中
							$("#search").val($("#dataDiv div:eq(" + count + ")").html());
						}
					}
				})

	})
</script>
</head>
<body>
	<!-- 创建div容器将提示语和搜索框div显示在一起 -->
	<div id="container" style="margin: auto; width: 550px;">
		<div id="sdiv" style="margin: auto; width: 550px; margin-top: 300px">
			<!-- 创建div进行搜索框的布局 -->
			<input type="text" name="search" id="search" value=""
				style="width: 400px; height: 30px; font-size: 20px" /> <input
				type="button" value="搜索" style="width: 90px; height: 35px" />
		</div>
		<!-- 提示语div -->
		<div id="dataDiv"
			style="width: 402px; height: 300px; border: solid 1px; border-top: none;display: none;" >

		</div>
	</div>
</body>
</html>

测试数据库

##创建关键字词汇表
create table t_data(
	id int(10) not null auto_increment,
	title varchar(100) not null,
	remark VARCHAR(500),
	PRIMARY key(id)
)

select *from t_data;

insert into t_data values(DEFAULT,'abc','');
insert into t_data values(DEFAULT,'abb','');
insert into t_data values(DEFAULT,'add','');
insert into t_data values(DEFAULT,'abdc','');
insert into t_data values(DEFAULT,'bbc','');
insert into t_data values(DEFAULT,'bbbc','');
insert into t_data values(DEFAULT,'bdbc','');
insert into t_data values(DEFAULT,'baas','');
insert into t_data values(DEFAULT,'aby','');
insert into t_data values(DEFAULT,'abnn','');
insert into t_data values(DEFAULT,'abg','');
insert into t_data values(DEFAULT,'abk','');
insert into t_data values(DEFAULT,'cbk','');

select * from t_data where title like CONCAT('a','%');