bootstrap3-typeahead自动补全插件

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

简介
是Bootstrap-3-Typeahead，不是Twitter open source的typeahead，两者用法有差异。外加如果配合原生的Bootstrap3的话推荐还是用这个。

通过上面的github下载bootstrap3-typeahead.min.js文件并引入到页面中。
前段html:

    <div class="row col-md-3    " style="margin-top: 20px;">
        <input type="text" class="form-control"  name="username" id="username">
    </div>

js文件：

        var data = ['afd','dsfa','sdf','ddddd'];
        $("#username").typeahead({source: data});

通过上面的代码运行你可能会发下自动补全的下拉框上面还有一层浏览器自带的自动补全，我们可以通过autocomplete=”off”属性阻止浏览器的默认下拉提示显示在自动补全插件上面。

<input type="text" class="form-control" autocomplete="off"  name="username" id="username">

通过添加data-provide=”typeahead”属性声明这是一个typeahead组件

<input type="text" class="form-control" autocomplete="off" data-provide="typeahead" name="username" id="username">

通过JavaScript调用typeahead组件：

$('.typeahead').typeahead()

删除掉注册到输入框上的typeahead组件，并且恢复到原来的状态。

$('.typeahead').typeahead('destroy')

2.自动补全插件一些基本选项参数使用

        $("#username").typeahead({
            source: data,//数据源
            items:4,//自动补全最少展示的选项数量
            minLength:0,//触发自动补全提示的最小字符长度，你可以将它设置为0，也就是只要提示的函数被触发，即使没有文本也会做提示。
            showHintOnFocus:true,//如果输入焦点立即提示提示。如果设置为true，将显示所有匹配项。如果设置为“全部”，它将显示所有提示，而不是通过当前文本过滤它们。当您希望输入类似于组合框的输入时，可以使用此选项，并在键入时自动完成筛选选项
            scrollHeight:0,//下拉提示框于输入框之间的距离，默认是0
            matcher: function(e){
                console.log(e);
                //决定查询是否匹配条目。带有一个单一的参数，即要测试查询的条目。当前查询通过 this.query 访问。返回一个布尔值 true，表示查询匹配。数据类型是 function。默认情况下是大小写不敏感的
                return true;
            }
        });