在搜索输入框输入内容的时候，会自动补全一些内容。在文本框下面给出一些提示信息(需要从服务器端进行查询的)。

需求分析

步骤分析

1、创建一个数据库和表：

2、设计一个页面：

3、文本框绑定一个事件 keyup

4、在keyup所触发函数中：

    1、获得文本框的值

    2、将这个值异步提交到服务器$.post()

    3、提交到Servlet：

        a、接收参数

        b、调用业务层–调用DAO: select * from .. Where xx like ?

        c、查询之后页面跳转把数据显示到一个表格中

代码实现

1、创建数据库和表

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

2、设计搜索页面

<div>
    <h1>站内搜索</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的时候发送ajax
    $("#tid").keyup(function(){
        //获取文本框的值
        var $value=$(this).val();
        //内容为空的时候不发送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 将其内部插入到id为did的div中
                        $("#did").append($("<div>"+this+"</div>"));
                    });
                    //将div显示
                    $("#did").show();
                }
            });
        }else{
            //内容为空的时候 将div隐藏 
            $("#did").hide();
        }
    });
})
</script>