IGeekShop案例8-站内搜索功能

1 header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- 登录 注册 购物车... -->
<div class="container-fluid">
    <div class="col-md-4">
        <img src="img/logo2.png" />
    </div>
    <div class="col-md-5">
        <img src="img/header.png" />
    </div>
    <div class="col-md-3" style="padding-top:20px">
        <ol class="list-inline">
            <li><a href="login.jsp">登录</a></li>
            <li><a href="register.jsp">注册</a></li>
            <li><a href="cart.jsp">购物车</a></li>
            <li><a href="order_list.jsp">我的订单</a></li>
        </ol>
    </div>
</div>
<!-- 导航条 -->
<div class="container-fluid">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">首页</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="product_list.htm">手机数码<span class="sr-only">(current)</span></a></li>
                    <li><a href="#">电脑办公</a></li>
                    <li><a href="#">电脑办公</a></li>
                    <li><a href="#">电脑办公</a></li> 
                </ul>
                <form class="navbar-form navbar-right" role="search">
                    <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:179px;border:1px solid #ccc;">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <!-- 完成异步搜索 -->
                <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、获得输入框的输入的内容
                        var word = $(obj).val();
                        //2、根据输入框的内容去数据库中模糊查询---List<Product>
                        var content = "";
                        $.post(
                            "${pageContext.request.contextPath}/searchWord",
                            {"word":word},
                            function(data){
                                //3、将返回的商品的名称 现在showDiv中
                                //[{"pid":"1","pname":"小米 4c 官方版","market_price":8999.0,"shop_price":8999.0,"pimage":"products/1/c_0033.jpg","pdate":"2016-08-14","is_hot":1,"pdesc":"小米 4c 标准版 全网通 白色 移动联通电信4G手机 双卡双待 官方好好","pflag":0,"cid":"1"}]
                                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");
                                }
                            },
                            "json"
                        );
                    }
                </script>
            </div>
        </div>
    </nav>
</div>

2 web层

package www.test.web;
import java.io.IOException;
import java.sql.SQLException;
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.google.gson.Gson;
import net.sf.json.JSONArray;
import sun.org.mozilla.javascript.internal.json.JsonParser;
import www.test.domain.Product;
import www.test.service.ProductService;
public class SearchWordServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //获得关键字
        String word = request.getParameter("word");
        //查询该关键字的所有商品
        ProductService service = new ProductService();
        List<Object> productList = null;
        try {
            productList = service.findProductByWord(word);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        //["xiaomi","huawei",""...]
        //使用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);
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

3 service层

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

4 dao层

public List<Object> findProductByWord(String word) throws SQLException {
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select * from product where pname like ? limit 0,8";
List<Object> query = runner.query(sql, new ColumnListHandler("pname"), "%"+word+"%");//模糊查询
return query; 
}