一、大致原理

 

　->　监听键盘按键up事件 ->  键盘连续快速输入查询条件 -> 停止输入，按键弹起 -> 检测是否存在缓存 -> 如果没有缓存，向后台发送ajax请求 -> 执行sql查询 -> 返回数据到页面展示

 

   -> 　如果有缓存，则读取缓存 -> 返回数据到页面展示

 

 二、简单实例——待改进与更新示例

　　参考自：

　　前台页面

　　　　前台只是修改了ajax返回值的部分：

<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/WEB-INF/views/include/taglib.jsp"%>                          success page              
      
        
       
                    智能模糊查询提示            
                    
        
            
        
         
       
              
      
                            

　　　　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 = "
     
      ";                                   $.each(data, function (idx, item) {                                        layer += "
";                                 });                                layer += "
" + item.assoWord + "
";                                    //将结果添加到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
      
        testSearch(@RequestParam("userName") String k, HttpServletResponse response) {        List
       
         list = new ArrayList
        
         ();        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;    }        }