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

js腳本

<script type="text/javascript">$(function() {//獲取搜索框輸入的內(nèi)容,鍵盤按鍵松開執(zhí)行$(".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");});})//鼠標(biāo)在小div上變色function overChangeColor(obj){$(obj).css("background","#e8e7ed");}//鼠標(biāo)移開變色function outChangeColor(obj){$(obj).css("background","#fff");}//點(diǎn)擊小div標(biāo)簽跳轉(zhuǎn)servletfunction jumpProduct(obj,pid){location.href="${pageContext.request.contextPath}/productInfo?pid="+pid;} </script>

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。