bootstrap3-typeahead autocompletion plugin

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

Introduction
It is Bootstrap-3-Typeahead, not the typeahead of Twitter open source, and the usage of the two is different. In addition, it is recommended to use this if it is used with the native Bootstrap3.

Download the bootstrap3-typeahead.min.js file through the above github and introduce it into the page.
The previous html:

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

js file:

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

By running the above code, you may issue a drop-down box with auto-completion. There is also a layer of auto-completion that comes with the browser. We can prevent the browser's default drop-down prompt from being displayed in the auto-completion through the autocomplete=”off” attribute. above the plugin.

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

Declare this as a typeahead component by adding the data-provide="typeahead" attribute

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

Call the typeahead component via JavaScript:

$('.typeahead').typeahead()

Delete the typeahead component registered to the input box and restore it to its original state.

$('.typeahead').typeahead('destroy')
2. Use some basic option parameters of the auto-completion plugin
        $("#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;
            }
        });

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325559054&siteId=291194637