使用JQuery完成仿百度的信息提示

使用JQuery完成仿百度的信息提示

1、需求分析

在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的)。

2、步骤分析

1、创建一个数据库和表:
2、设计一个页面
3、文本框绑定一个事件.keyup
4、在keyup所触发函数中:
（1）获得文本框的值.
（2）将这个值异步提交到服务器.$.post();
（3）提交到Servlet：
a.接收参数:
b.调用业务层–调用DAO: select * from .. Where xx like ?;
c.查询之后页面跳转把数据显示到一个表格中.

3、代码实现

（1）创建数据库和表

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

数据库表内容如图所示：

（2）设计一个页面

<center>
        <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> 
    </center>

（3）为文本框绑定事件:编写jquery代码

$(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(){
                            //alert(this);
                            //可以将每一个值放入一个div 将其内部插入到id为did的div中
                            $("#did").append($("<div>"+this+"</div>"));
                        });
                        //将div显示
                        $("#did").show();
                    }
                });

            }else{
                //内容为空的时候 将div隐藏 
                $("#did").hide();
            }
        });
    })

4、实现结果

输入a后，下面额文本框会给出提示信息。

想要具体demo的小伙伴可以给我留言哦~~