在搜索輸入框輸入內(nèi)容的時(shí)候，會(huì)自動(dòng)補(bǔ)全一些內(nèi)容。在文本框下面給出一些提示信息(需要從服務(wù)器端進(jìn)行查詢的)。

需求分析

步驟分析

1、創(chuàng)建一個(gè)數(shù)據(jù)庫和表：

2、設(shè)計(jì)一個(gè)頁面：

3、文本框綁定一個(gè)事件 keyup

4、在keyup所觸發(fā)函數(shù)中：

    1、獲得文本框的值

    2、將這個(gè)值異步提交到服務(wù)器$.post()

    3、提交到Servlet：

        a、接收參數(shù)

        b、調(diào)用業(yè)務(wù)層–調(diào)用DAO: select * from .. Where xx like ?

        c、查詢之后頁面跳轉(zhuǎn)把數(shù)據(jù)顯示到一個(gè)表格中

代碼實(shí)現(xiàn)

1、創(chuàng)建數(shù)據(jù)庫和表

CREATE TABLE words(
    id INT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(20)
);

2、設(shè)計(jì)搜索頁面

<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對(duì)搜索框綁定事件

<script type="text/javascript">
$(function(){
    //文本框keyup的時(shí)候發(fā)送ajax
    $("#tid").keyup(function(){
        //獲取文本框的值
        var $value=$(this).val();
        //內(nèi)容為空的時(shí)候不發(fā)送ajax
        if($value!= null && $value!=''){
            //清空div
            $("#did").html("");
            $.post("/day15/searchKw","kw="+$value,function(d){
                //不為空的時(shí)候切割字符串
                if(d!=''){
                    var arr=d.split(",");
                    $(arr).each(function(){
                        //可以將每一個(gè)值放入一個(gè)div 將其內(nèi)部插入到id為did的div中
                        $("#did").append($("<div>"+this+"</div>"));
                    });
                    //將div顯示
                    $("#did").show();
                }
            });
        }else{
            //內(nèi)容為空的時(shí)候 將div隱藏 
            $("#did").hide();
        }
    });
})
</script>