如何实现输入框提示功能

2018-12-22 10:22:04 122

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

需求分析


步骤分析

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、设计搜索页面


    

站内搜索

    
             
    

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


提交成功!非常感谢您的反馈,我们会继续努力做到更好!

这条文档是否有帮助解决问题?

非常抱歉未能帮助到您。为了给您提供更好的服务,我们很需要您进一步的反馈信息:

在文档使用中是否遇到以下问题:
XML 地图