输入框实时模糊匹配输入
一、大致原理
-> 监听键盘按键up事件 -> 键盘连续快速输入查询条件 -> 停止输入，按键弹起 -> 检测是否存在缓存 -> 如果没有缓存，向后台发送ajax请求 -> 执行sql查询 -> 返回数据到页面展示
-> 如果有缓存，则读取缓存 -> 返回数据到页面展示
二、简单实例——待改进与更新示例
参考自：http://blog.csdn.net/yuanyuan214365/article/details/63254539
前台页面
前台只是修改了ajax返回值的部分：
<%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>模糊匹配</title> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> #searchresult { width: 140px; position: absolute; z-index: 1; overflow: hidden; left: 140px; top: 71px; background: #E0E0E0; border-top: none; } #txt_search { font-size:15px; height:20px; } .line { font-size: 15px; background: #E0E0E0; width: 140px; padding:0px; } .hover { background: #007ab8; width: 140px; color: #fff; } .std { width: 150px; } </style> </head> <body> success page <form id="form1" runat="server"> <div> 智能模糊查询提示 <input id="txt_search" type="text" style="width:140px;" /> <div id="searchresult" style="display: none;"> </div> </div> </form> <script type="text/javascript"> $(function () { $("#txt_search").keyup(function (evt) { ChangeCoords(); //控制查询结果div坐标 var k = window.event ? evt.keyCode : evt.which; //输入框的id为txt_search，这里监听输入框的keyup事件 //不为空 && 不为上箭头或下箭头或回车 if ($("#txt_search").val() != "" && k != 38 && k != 40 && k != 13) { var keyWord = $("#txt_search").val(); $.ajax({ type: 'GET', async: true, //同步执行，不然会有问题 dataType: "json", url: "http://192.168.10.98:8080/jeesite/f/test/test/testSearch?userName="+keyWord, //提交的页面/方法名 // data: "{'userName':'" + $("#txt_search").val() + "'}", //参数（如果没有参数：null） error: function (msg) {//请求失败处理函数 alert("数据加载失败"); }, success: function (data) { //请求成功后处理函数。 /* var objData = eval("(" + data.userName + ")"); */ //var data = eval(result); console.log(data); if (data.length > 0) { var layer = ""; layer = "<table id='aa'>"; $.each(data, function (idx, item) { layer += "<tr class='line'><td class='std'>" + item.assoWord + "</td></tr>"; }); layer += "</table>"; //将结果添加到div中 $("#searchresult").empty(); $("#searchresult").append(layer); $(".line:first").addClass("hover"); $("#searchresult").css("display", ""); //鼠标移动事件 $(".line").hover(function () { $(".line").removeClass("hover"); $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); //$("#searchresult").css("display", "none"); }); //鼠标点击事件 $(".line").click(function () { $("#txt_search").val($(this).text()); $("#searchresult").css("display", "none"); }); } else { $("#searchresult").empty(); $("#searchresult").css("display", "none"); } } }); } else if (k == 38) {//上箭头 $('#aa tr.hover').prev().addClass("hover"); $('#aa tr.hover').next().removeClass("hover"); $('#txt_search').val($('#aa tr.hover').text()); } else if (k == 40) {//下箭头 $('#aa tr.hover').next().addClass("hover"); $('#aa tr.hover').prev().removeClass("hover"); $('#txt_search').val($('#aa tr.hover').text()); } else if (k == 13) {//回车 $('#txt_search').val($('#aa tr.hover').text()); $("#searchresult").empty(); $("#searchresult").css("display", "none"); } else { $("#searchresult").empty(); $("#searchresult").css("display", "none"); } }); $("#searchresult").bind("mouseleave", function () { $("#searchresult").empty(); $("#searchresult").css("display", "none"); }); }); //设置查询结果div坐标 function ChangeCoords() { // var left = $("#txt_search")[0].offsetLeft; //获取距离最左端的距离，像素，整型 // var top = $("#txt_search")[0].offsetTop + 26; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度） var left = $("#txt_search").position().left; //获取距离最左端的距离，像素，整型 var top = $("#txt_search").position().top + 20; ; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度） $("#searchresult").css("left", left + "px"); //重新定义CSS属性 $("#searchresult").css("top", top + "px"); //同上 } </script> </body> </html>
ajax部分：（仅作为示例，实际使用时请修改为合适变量名等）
var keyWord = $("#txt_search").val(); $.ajax({ type: 'GET', async: true, //同步执行，不然会有问题 dataType: "json", url: "http://192.168.10.98:8080/jeesite/f/test/test/testSearch?userName="+keyWord, //提交的页面/方法名 // data: "{'userName':'" + $("#txt_search").val() + "'}", //参数（如果没有参数：null） error: function (msg) {//请求失败处理函数 alert("数据加载失败"); }, success: function (data) { //请求成功后处理函数。 /* var objData = eval("(" + data.userName + ")"); */ //var data = eval(result); console.log(data); if (data.length > 0) { var layer = ""; layer = "<table id='aa'>"; $.each(data, function (idx, item) { layer += "<tr class='line'><td class='std'>" + item.assoWord + "</td></tr>"; }); layer += "</table>"; //将结果添加到div中 $("#searchresult").empty(); $("#searchresult").append(layer); $(".line:first").addClass("hover"); $("#searchresult").css("display", ""); //鼠标移动事件 $(".line").hover(function () { $(".line").removeClass("hover"); $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); //$("#searchresult").css("display", "none"); }); //鼠标点击事件 $(".line").click(function () { $("#txt_search").val($(this).text()); $("#searchresult").css("display", "none"); }); } else { $("#searchresult").empty(); $("#searchresult").css("display", "none"); } } });
后台部分：
实际使用时可改为实时从数据库查询
private static Logger log = LoggerFactory.getLogger(TestController.class); @RequestMapping(value = "/testSearch", method = RequestMethod.GET) @ResponseBody public List<AssociateWord> testSearch(@RequestParam("userName") String k, HttpServletResponse response) { List<AssociateWord> list = new ArrayList<AssociateWord>(); System.out.println("搜索关键字："+k); boolean b = StringUtils.isBlank(k); //AssociateWord aw = new AssociateWord(); if (!b) { //不为空（可构造其他条件） log.debug(">>>>>>>>>>搜索关键字非空"); //构造和k相关的词 for (int i =0; i<5; i++) { AssociateWord aw = new AssociateWord(); String s = "关键字"+i; System.out.println(s); aw.setAssoWord(s); list.add(aw); } response.setHeader("Access-Control-Allow-Origin", "*"); return list; } else { log.debug(">>>>>>>>>>搜索关键字为空"); response.setHeader("Access-Control-Allow-Origin", "*"); //可构造热门搜索等 return list; } }
实体类：（请根据实际情况改造）
package com.thinkgem.jeesite.modules.test.entity; /** * 描述：联想提示词封装类 * @author Administrator * @date 2017年8月22日 */ public class AssociateWord { private String assoWord; public String getAssoWord() { return assoWord; } public void setAssoWord(String assoWord) { this.assoWord = assoWord; } }
