ajax：搜索框提示语

最新推荐文章于 2021-08-06 00:54:51 发布

fachew

最新推荐文章于 2021-08-06 00:54:51 发布

阅读量784

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/fachew/article/details/97750144

版权

本文介绍了如何使用Ajax、jsp、servlet和jdbc实现搜索框的智能提示功能。功能包括：用户输入关键字时显示下拉提示，支持鼠标和键盘选择提示项。文章详细阐述了功能需求、技术分析、功能实现步骤以及遇到的问题与解决方案，包括键盘事件的处理、延迟发送请求和中文搜索的正则判断。

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

一、功能需求

功能需求：
用户在搜索框中输入关键字，搜索框中出现下拉选项，显示关键字的提示语。
用户可以使用鼠标进行提示语的选择，也可以使用键盘的上下键来进行选择。
技术分析：
ajax+jsp+servlet+jdbc
功能分析（思路）：
1.创建搜索界面（搜索框和提示语div和搜索按钮）
2.给搜索框添加onkeyup事件，键盘弹起时发送ajax请求
请求当前用户输入的信息相应提示语数据
3.将提示语数据填充到搜索框下的div数据中
4.实现使用鼠标选择提示语
5.实现使用键盘上下键选择
6.实现鼠标和键盘的联动操作
7.将显示语的div进行隐藏，当有提示语时显示隐藏的div
数据库设计：
1.创建表：（data）储存常用的关键字数据
2.关键字编号：id
3.关键字数据：title
4.说明：remark
添加测试数据：
要求前期测试数据为英文单词
SQL语句设计：
查询以用户当前搜索框开头的文字
select * from data where title like ‘a%’
注意：提示语不要太多
数据库实现，在数据库中创建表，添加测试数据。

二、代码实现

1.数据库设计：

##创建关键字词汇表
create table t_data (
id int(10) not null auto_increment,
title varchar(100) not null,
remark varchar(500),
primary key(id)
)
##添加测试数据
insert into t_data values(default,'abc','');
insert into t_data VALUES(DEFAULT,'abb','');
insert into t_data VALUES(DEFAULT,'acc','');
insert into t_data VALUES(DEFAULT,'add','');
insert into t_data VALUES(DEFAULT,'bee','');
insert into t_data VALUES(DEFAULT,'bff','');
insert into t_data VALUES(DEFAULT,'abg','');
insert into t_data VALUES(DEFAULT,'abh','');
insert into t_data VALUES(DEFAULT,'crt','');
##查询所有数据
select * from t_data;

2.设计搜索框页面：

<body>
  <!-- 创建div容器将搜索框和搜索框提示语div显示到一起 -->
  <!-- 创建div进行搜索框布局 -->
  <div id="container" style="width:550px;margin:auto;">
 	 <div id="sdiv" style="width:550;margin:auto;margin-top:200px;">
	  	<input name="search" type="text" id="search" style="width:400px;height:30px;font-size:18px;"/>
	    <input type="button" value="搜索" style="width:100px;height:30px;"/>
  	</div>
  	<!-- 提示语div -->
  	<div id="dataDiv" style="width:398px;height:300px;border:solid 1px;border-top:none;" ></div>
  </div>
  </body>

如图：

最低0.47元/天解锁文章

fachew

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
ajax：搜索框提示语

功能需求：用户在搜索框中输入关键字，搜索框中出现下拉选项，显示关键字的提示语。用户可以使用鼠标进行提示语的选择，也可以使用键盘的上下键来进行选择。技术分析：ajax+jsp+servlet+jdbc功能分析（思路）：1.创建搜索界面（搜索框和提示语div和搜索按钮）2.给搜索框添加onkeyup事件，键盘弹起时发送ajax请求请求当前用户输入的信息相应提示语数据3.将提示语数据填...
复制链接

扫一扫

专栏目录