bootstrap----自动补全

参考手册

　　https://github.com/bassjobsen/Bootstrap-3-Typeahead

Download the latest bootstrap3-typeahead.js or bootstrap3-typeahead.min.js.

 

简单使用

html

<input type="text" class="form-control" id="loginInfoDisplay" autocomplete="off"/>

js

        $("#loginInfoDisplay").typeahead({
            minLength: 3,//最小开始查询的字符个数
            items: 5,//下拉列表中最多显示的条数
            source: function (query, process) {//加载数据源
                //我们使用ajax去查询

                //给data添加固定的数据
                var data=[{id: "1", username: "name1"}];
                process(data);

                //通过ajax从后台获取数据
                // $.ajax({
                //     dataType: "json",
                //     type: "POST",
                //     url: "vedioAuth_autocomplate.do",
                //     data: {keyword: query},
                //     success: function (data) {//这个data就是一个json对象的数组[{id:xx,username:xxxx}]
                //         if (data && data.length) {
                //             process(data);//process就是交给我们获得数据之后用来调用的方法,这个方法执行了,下拉列表就出来了
                //         }
                //     }
                // });
            },
            //用于显示input输入框中data中的json数据的内容
            displayText: function (item) {
                return item.username
            }
        }).change(function () {
            var current = $(this).typeahead("getActive");
            if (current) {
                //由于我们的需要是输入框中的内容不需要提交,我们需要提交的是current.id(当前json数据的id)
                //所以我们需要将id值添加到form表单中
                $("#loginInfoValue").val(current.id);
            }
        });