使用ajax完成站内搜索功能（异步搜索功能）

思路分析：键盘抬起时候获得输入框的内容，根据输入框的内容去数据库中模糊查询，然后将返回的商品返回在showDiv中

1：前台

index.jsp

<div class="form-group" style="position: relative">
    <input id="search" type="text" class="form-control" placeholder="Search" onkeyup="searchWord(this)">
    <div id="showDiv"
         style="display:none;position:absolute;z-index:1000;background:#fff;width:170px;border:1px solid #ccc;">
    </div>
</div>

<script type="text/javascript">
    function overFn(obj) {
        $(obj).css("background","#DBEAF9");

    }
    function outFn(obj) {
        $(obj).css("background","#fff");

    }
    function clickFn(obj) {
        $("#search").val($(obj).html());
        $("#showDiv").css("display","none");

    }
    function searchWord(obj) {
        //1键盘抬起时获得输入框的内容
        //alert(obj.value);
        var word = $(obj).val();
        //2根据输入框的内容去数据库中模糊查询---List<Product>
        var content = "";
        $.ajax({
            url:"${pageContext.request.contextPath}/searchWord",
            type:"POST",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data:{"word":word},
            success:function (data) {
                //3将返回的商品名称显示在showDiv中
                if (data.length>0){
                    for (var i = 0;i<data.length;i++){
                        content+="<div style='padding: 5px;cursor: pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>"+data[i]+"</div>";
                    }
                    $("#showDiv").html(content);
                    $("#showDiv").css("display","block");
                }
            },
            dataType:"json",
            }

        );

    }
</script>

2:后台分为三层实现（web层，service层，dao层）

web层(urlPatterns为searchWord的java代码)部分：

SearchWordServlet.java

 //获得关键字
        String word = request.getParameter("word");
        //查询该关键字的所有商品
        ProductService service = new ProductService();
        List<Object> productList = null;
        try {
            productList = service.findProductByWord(word);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        //[{},{},{}....],要将java对象转换成json数据
        //使用json的转换工具将对象或集合转换成json格式的字符串。
//        JSONArray fromObject = JSONArray.fromObject(productList);
//        String string = fromObject.toString();
//        System.out.println(string);
        Gson gson = new Gson();
        String json = gson.toJson(productList);
        System.out.println(json);
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write(json);

service层：

ProductService.java

/根据关键字去查询商品
    public List<Object> findProductByWord(String word) throws SQLException {
        ProductDao dao = new ProductDao();
        return dao.findProductByWord(word);
    }

dao层：

ProductDao.java

public List<Object> findProductByWord(String word) throws SQLException {
    QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
    //查询语句，limit是限制显示的条数0到8
    String sql = "select * from product where pname like ? limit 0,8";
    //List<Product> productList = runner.query(sql, new BeanListHandler<Product>(Product.class), "%"+word+"%");
    List<Object> query = runner.query(sql, new ColumnListHandler("pname"), "%"+word+"%");
    return query;
}