ajax：搜索框提示语
一、功能需求
功能需求：
用户在搜索框中输入关键字，搜索框中出现下拉选项，显示关键字的提示语。
用户可以使用鼠标进行提示语的选择，也可以使用键盘的上下键来进行选择。
技术分析：
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.设计搜索框页面：
如图：
3.提示语后台功能实现
1）V层：
js代码：
2）C层：
SearchServlet
package com.facai.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.facai.pojo.Data;
import com.facai.service.SearchService;
import com.facai.service.SearchServiceImpl;
import com.google.gson.Gson;
public class SearchServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//设置请求编码格式
req.setCharacterEncoding("utf-8");
//设置响应编码格式
resp.setContentType("text/html;charset=utf-8");
//获取请求信息
String sdata=req.getParameter("sdata");
//处理请求信息
//获取业务层对象
SearchService ss=new SearchServiceImpl();
//调用方法获取提示语数据
List ld=ss.getSearchInfoService(sdata);
//响应请求信息
//直接响应
resp.getWriter().write(new Gson().toJson(ld));
}
}
3)M层：
SearchService接口
package com.facai.service;
import java.util.List;
import com.facai.pojo.Data;
public interface SearchService {
//根据用户搜索框数据获取提示语数据
List getSearchInfoService(String sdata);
}
SearchSevice类
package com.facai.service;
import java.util.List;
import com.facai.dao.SearchDao;
import com.facai.dao.impl.SearchDaoImpl;
import com.facai.pojo.Data;
public class SearchServiceImpl implements SearchService {
//创建SearchDao对象
SearchDao sd=new SearchDaoImpl();
@Override
public List getSearchInfoService(String sdata) {
//根据用户搜索框数据获取提示语数据
return sd.getSearchInfoDao(sdata);
}
}
SearchDao接口
package com.facai.dao;
import java.util.List;
import com.facai.pojo.Data;
public interface SearchDao {
//根据用户搜索框数据获取提示语数据
List getSearchInfoDao(String sdata);
}
SearchDao类
package com.facai.dao.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import com.facai.dao.SearchDao;
import com.facai.pojo.Data;
import com.facai.util.DBUtil;
public class SearchDaoImpl implements SearchDao{
//根据用户搜索框数据获取提示语数据
@Override
public List getSearchInfoDao(String sdata) {
//声明jdbc变量
Connection conn=null;
PreparedStatement ps=null;
ResultSet rs=null;
//声明变量
ArrayList ld=null;
try {
//获取连接
conn=DBUtil.getConnection();
//创建SQL命令
String sql="select * from t_data where title like concat(?,'%') ";
//创建SQL命令对象
ps=conn.prepareStatement(sql);
//给占位符赋值
ps.setString(1, sdata);
//执行查询
rs=ps.executeQuery();
ld=new ArrayList<>();
//遍历
while(rs.next()){
//创建一个Data实体类对象
Data d=new Data();
d.setId(rs.getInt("id"));
d.setTitle(rs.getString("title"));
d.setRemark(rs.getString("remark"));
ld.add(d);
}
} catch (Exception e) {
e.printStackTrace();
}finally{
//关闭资源
DBUtil.closeAll(rs, ps, conn);
}
//返回结果
return ld;
}
}
4.问题：现在用户在搜索框上单击键盘的任何一个键都会发起ajax请求，请求提示语数据
解决：判断用户单击的按键符合要求再发起ajax请求
1.获取用户按了哪个键
2.使用event对象进行按键的键盘码值获取
实现：1.鼠标选择提示语
2.键盘上下键选择提示语
3.实现键盘和鼠标的联动操作
4.将显示提示语语的div进行隐藏，当搜索框有文字时再出现
js代码
在这里设置了只有输入英文才进行ajax请求
5.问题：当用户点击键盘都会触发键盘事件的执行
只要数据符合要求，都会发送ajax请求，请求提示语信息。每点击一次发送一次。
其实只需要最后一次进行请求发送
解决：
延迟发送
JS代码：
在判断搜索框数据是否为空之后
//判断搜索框数据是否为空
if(sd==""){
return;
}
加入
//清除之前要发的请求
window.clearTimeout(id);
//延迟发送请求
window.setTimeout(function(){
//发起ajax请求，请求当前用户搜索的提示信息
$.get("search",{sdata:sd},function(data){
//使用eval方法将数据转化为对象
eval("var sd="+data);
//获取提示语div元素对象
var dataDiv=$("#dataDiv");
//清空内容
dataDiv.empty();
//显示隐藏的div
$("#dataDiv").css("display","");
//将提示语数据填充到div中
for(var i=0;i"+sd[i].title+" 6.中文搜索
添加正则表达式判断空格
添加判断空格的code值
//声明正则表达式判断空格
var reg=/^\s+$/g;
//获取event对象
var eve=window.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;
}