利用Ajax和Servlet实现输入框提示功能

目的和效果：

    输入框输入字符串x，匹配后台传入的数据str，如果str中的元素包含字符串x，则提示。

后台代码：

                  String x = request.getParameter("c");//获取前台输入的数据

        Map<String, String> map = new HashMap<String, String>();

        String a = "aa,aaa,aba,acc";

        String b = "bb,bcb,ba";

        String c = "cc,cd,caca,cff";

        String d = "df,dg,dh";//模拟数据库取值

        map.put("a", a);

        map.put("b", b);

        map.put("c", c);

        map.put("d", d);

        if (x.startsWith("a")) {

            out.print(map.get("a"));//匹配成功返回结果

        } else if (x.startsWith("b")) {

            out.print(map.get("b"));

        } else if (x.startsWith("c")) {

            out.print(map.get("c"));

        } else if (x.startsWith("d")) {

            out.print(map.get("d"));

        }else{

            out.print("");

            

}

页面布局

<input type="text" id="search" value="" />

     <div id="content">
         <ul id="list">

         </ul>

     </div>

CS

            #content {

                display: none;

                margin-top: 3px;

                border: 1px solid gray;

                width: 200px;

            }

            

            #list {

                list-style: none;

                margin: 0 0;

                padding: 0 0;

            }

            

            li {

                margin: 5px 5px;

            }

            

            li:hover {

                background-color: gainsboro;

}

JS

            $(function() {

                //输入框绑定一个事件,内容改变的事件

                $("#search").bind('input property', function() {

                    //只要数据发生改变，就把原来的数据清空

                    $("#list").html('');

                    $("#content").hide();

                    //执行ajax，向后台传递数据，并得到后台返回的数据列表

                    //url,ajax的访问的页面（后台的地址）

                    //data,传递给后台的数据

                    //回调函数，后台响应结果之后给前台返回数据的回调函数

                    //判断如果输入框为空，就不调用ajax

                    if($("#search").val() != '') {

                        $.post('search', {

                            'c': $("#search").val()

                        }, function(data) {

                            //解析数据

                            data = data.split(',');

                            $(data).each(function(e) {

                                //得到数组的每一个元素

                                $("#list").append('<li>' + data[e] + '</li>');

                                $("#content").show();

                                //设置点击事件

                                $("li").click(function() {

                                    //把内容填充到输入框中

                                    $("#search").val($(this).html());

                                    $("#list").html('');

                                    $("#content").hide();

                                })

                            })

                        })

                    }

                })

})

效果图

 

null