ajax下拉搜索框的实现

最新推荐文章于 2023-05-22 22:27:23 发布

CarlosXu14

最新推荐文章于 2023-05-22 22:27:23 发布

阅读量415

点赞数

分类专栏： jsp ajax 编程语言

本文链接：https://blog.csdn.net/qq_43459184/article/details/96137778

版权

jsp页面

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'search.jsp' starting page</title>
	<!-- 
		ajax之搜索框关键字提示语：
			功能需求：
				用户在搜索框中输入关键字，然后搜索框下出现下拉选项，提示关键字的提示语。
				用户可以使用鼠标进行提示语的选择，也可以使用键盘的上下键来进行选择。
			技术分析：
				ajax技术+servlet+jsp+jdbc
			功能分析(思路)：
				1、创建搜索界面(搜索框和提示语div和搜索按钮)
				2、给搜索框添加onkeyup事件，键盘弹起时发送ajax请求
				   请求当前用户输入的信息对应的提示语数据
				3、将提示语数据填充到搜索框下的div中
				问题：
					现在用户在搜索框上单击键盘的任意一个键都会发起ajax请求，请求提示语数据。
				解决：
					判断用户单击的键盘的按键符合要求再发请求。
				解决：
					获取用户按了键盘的哪个键。使用event对象进行按键的键盘码值获取
				4、实现使用鼠标选择提示语
				5、实现使用键盘的上和下键选择提示语
				6、实现鼠标和键盘的联动操作
				7、将显示提示语的div进行隐藏，当有提示语的时候显示隐藏的div
			完善：
				问题1：只要用户在搜索框中出现键盘点击动作，都会触发键盘事件的执行。
					而只要数据符合要求，都会发送ajax请求，请求提示语信息。点击一次都发一次。
					但是其实只需要最后一次进行请求发生即可。
				解决1:
					使用延迟发送请求。
				使用1：
					window.setTimeout
				
				问题2：
					event对象在火狐浏览器中使用window.event获取不到。
				解决2:
					在获取浏览器中使用传参的方式给event进行赋值。
				使用：参照源码即可	
			数据库设计：
				创建表:(data)  存储了常用的关键字数据
					关键字编号：id
					关键字数据：title
					说明：remark
				添加测试数据:要求前期测试数据为英文单词

最低0.47元/天解锁文章

CarlosXu14

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax下拉搜索框的实现

jsp页面<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+r...
复制链接

扫一扫