思路：獲取input輸入框內的關鍵字內容-通過ajax提交到servlet-獲取搜索關鍵字提交service層-service層提交dao層模糊查詢商品名（pname like %..%）獲取相應的商品list返回給業務層-返回給web層-web層將beanList轉換成json返回給ajax引擎，引擎返回ajax監聽函數-函數內動態拼接<div>標簽加入父div標簽($(#div).html(str)),將父div的display屬性設置顯示即可

js腳本

<script type="text/javascript">$(function() {//獲取搜索框輸入的內容,鍵盤按鍵松開執行$(".form-control").keyup(function() {var value = this.value;var content="";$.get("/Web7/searchWrod", {"value" : value}, function(data) {if(data.length>0){for (var i = 0; i < data.length; i++) {content+= "<div οnmοuseοver='overChangeColor(this)' οnmοuseοut='outChangeColor(this)' οnclick='jumpProduct(this,"+data[i].pid+")'>" + data[i].pname + "</div>";$("#showDiv").html(content); $("#showDiv").css("display","block"); }}else{$("#showDiv").css("display","none");}}, "json");});})//鼠標在小div上變色function overChangeColor(obj){$(obj).css("background","#e8e7ed");}//鼠標移開變色function outChangeColor(obj){$(obj).css("background","#fff");}//點擊小div標簽跳轉servletfunction jumpProduct(obj,pid){location.href="${pageContext.request.contextPath}/productInfo?pid="+pid;} </script>

前端頁面：代碼標紅部分為比較有用的幾個屬性子標簽設置position:absolute z-index:1000;父標簽設置position:relative，此時子標簽不受標簽大小影響，而且在最前端

<form class="navbar-form navbar-right" role="search"><div class="form-group" style="position: relative;"><input type="text" class="form-control" placeholder="Search"><div id="showDiv"style="width: 170px; position: absolute; background-color: white; border: 1px solid #ccc; z-index: 1000; display: none;"></div><button type="submit" class="btn btn-default">Submit</button></div></form>

后端代碼：

web層：

response.setContentType("text/html;charset=UTF-8");String word = request.getParameter("value").trim();String newWord=new String(word.getBytes("ISO8859-1"),"UTF-8");ProductService service = new ProductService();List<Product> productList = null;try {productList = service.findProductForWord(newWord);} catch (SQLException e) {e.printStackTrace();}String json = new Gson().toJson(productList);/*System.out.println(json);System.out.println(newWord);*/response.getWriter().write(json);

service層：

public List<Product> findProductForWord(String word) throws SQLException {ProductDao dao=new ProductDao();List<Product> productList=dao.findProductForWord(word);return productList;}

dao層：

public List<Product> findProductForWord(String word) throws SQLException {QueryRunner runner=new QueryRunner(DataSourceUtils.getDataSource());String sql="select * from product where pname like ? limit 0,8";List<Product> productList = runner.query(sql, new BeanListHandler<Product>(Product.class), "%"+word+"%");return productList;}

總結

以上是生活随笔為你收集整理的实现站内搜索的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。