- 工信部備案號 滇ICP備05000110號-1
- 滇公安備案 滇53010302000111
- 增值電信業(yè)務(wù)經(jīng)營許可證 B1.B2-20181647、滇B1.B2-20190004
- 云南互聯(lián)網(wǎng)協(xié)會理事單位
- 安全聯(lián)盟認證網(wǎng)站身份V標(biāo)記
- 域名注冊服務(wù)機構(gòu)許可:滇D3-20230001
- 代理域名注冊服務(wù)機構(gòu):新網(wǎng)數(shù)碼
在搜索輸入框輸入內(nèi)容的時候,會自動補全一些內(nèi)容。在文本框下面給出一些提示信息(需要從服務(wù)器端進行查詢的)。
需求分析
步驟分析
1、創(chuàng)建一個數(shù)據(jù)庫和表:
2、設(shè)計一個頁面:
3、文本框綁定一個事件 keyup
4、在keyup所觸發(fā)函數(shù)中:
1、獲得文本框的值
2、將這個值異步提交到服務(wù)器$.post()
3、提交到Servlet:
a、接收參數(shù)
b、調(diào)用業(yè)務(wù)層–調(diào)用DAO: select * from .. Where xx like ?
c、查詢之后頁面跳轉(zhuǎn)把數(shù)據(jù)顯示到一個表格中
代碼實現(xiàn)
1、創(chuàng)建數(shù)據(jù)庫和表
CREATE TABLE words( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(20) );
2、設(shè)計搜索頁面
<div> <h1>站內(nèi)搜索</h1> <div> <input name="kw" id="tid"><input type="button" value="搜索"> </div> <div id="did" style="border: 1px solid red;width: 171px;position:relative;left:-34px;display:none"></div> </div>
3、利用jquery對搜索框綁定事件
<script type="text/javascript"> $(function(){ //文本框keyup的時候發(fā)送ajax $("#tid").keyup(function(){ //獲取文本框的值 var $value=$(this).val(); //內(nèi)容為空的時候不發(fā)送ajax if($value!= null && $value!=''){ //清空div $("#did").html(""); $.post("/day15/searchKw","kw="+$value,function(d){ //不為空的時候切割字符串 if(d!=''){ var arr=d.split(","); $(arr).each(function(){ //可以將每一個值放入一個div 將其內(nèi)部插入到id為did的div中 $("#did").append($("<div>"+this+"</div>")); }); //將div顯示 $("#did").show(); } }); }else{ //內(nèi)容為空的時候 將div隱藏 $("#did").hide(); } }); }) </script>
售前咨詢
售后咨詢
備案咨詢
二維碼
TOP