ajax之搜索框关键字提示语:
功能需求:
用户在搜索框中输入关键字,然后搜索框下出现下拉选项,提示关键字的提示语。
用户可以使用鼠标进行提示语的选择,也可以使用键盘的上下键来进行选择。
技术分析:
ajax技术+servlet+jsp+mybatis
功能分析(思路):
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
搜索次数:count(本次省略,一般是用来匹配搜索最多的内容取前面的
添加测试数据:要求前期测试数据为英文单词,后期会补充
SQL语句设计:
查询以用户当前搜索框数据开头的关键字
select * from t_data where title like 'a%'
注意:
测试数据不要太多。
数据库实现:
在数据库中创建表即可,并添加测试数据。
数据库设计代码
create
页面代码jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
servlet
package
service
public
serviceimpl
public
mapper
public
mapper.xml
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapperPUBLIC "-////DTD Mapper 3.0//EN""/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.lin.mapper.SearchMapper"><select id="selLikeSearch" resultType="com.lin.pojo.SearchData">select * from t_data<where><if test="sd != null and sd != ''"><bind name="sd" value="sd+'%'"/>and title like #{sd}</if></where></select></mapper>