IGeekShop案例8-站内搜索功能

- 日理万妓 2024-04-17 14:09 123阅读 0赞

# 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">
                
                <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; 
    }