基于Bootstrap的Typeahead自动补全插件

Bootstrap-Typeahead是一款基于Bootstrap的Typeahead自动补全插件。该插件用来完成输入框的自动完成、模糊搜索和建议提示的功能，同时支持bootstrap3和bootstrap4。

使用方法

在页面中引入jquery和bootstrap文件，以及bootstrap3-typeahead.js。

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootstrap3-typeahead.js"></script>        
                

基本使用

Bootstrap-Typeahead的使用方式有两种：通过数据属性字段的方式和通过Javascript加载的方式。

1、 通过属性字段的方式：

<input type="text" data-provide="typeahead" autocomplete="off">      
                

其中，data-provide="typeahead"属性字段表示使用typeahead扩展插件。autocomplete="off"表示关闭浏览器自带的自动完成功能。

2、通过Javascript加载的方式：

$('.typeahead').typeahead(); 
                

数据源

Bootstrap-Typeahead用于完成自动补全的数据源有两种方式：通过source属性来设置数据源，或者通过json数据来提供数据源。

1、通过source属性来设置数据源：

$(".typeahead").typeahead({
  source: [
    {id: "id1", name: "jQuery"},
    {id: "id2", name: "Script"},
    {id: "id3", name: "Net"}
  ]
});
                

2、通过json数据来提供数据源

$.get("data.json", function(data){
  $(".typeahead").typeahead({ 
    source:data 
  });
},'json');
//data.json的格式如下：
["jQuery","Script",".Net","Python","java","javascript","C++","CSS","HTML5"]                   
                

另外，你也可以使用使用json对象来代替简单的字符串。

var $input = $(".typeahead");
$input.typeahead({
  source: [
    {id: "someId1", name: "Display name 1"},
    {id: "someId2", name: "Display name 2"}
  ],
  autoSelect: true
});
$input.change(function() {
  var current = $input.typeahead("getActive");
  if (current) {
    // Some item from your model is active!
    if (current.name == $input.val()) {
      // This means the exact match is found. Use toLowerCase() if you want case insensitive match.
    } else {
      // This means it is only a partial match, you can either add a new item
      // or take the active if you don't want new items
    }
  } else {
    // Nothing is active so it is a new value (or maybe empty value)
  }
});                  
                

配置参数

配置参数可以通过data-*属性来设置，也可以在初始化是通过js来设置。需要注意的是，使用data-*属性来设置时，需要将驼峰格式的属性转换为连字符形式，例如，data-minLength需要写成data-min-length。

方法

Bootstrap-Typeahead的可用方法有：

• .typeahead(options)：初始化方法。
• .lookup：从外部触发查询方法。
• .getActive：获取当前的匹配项。获取到的数据可能是JSON或字符串，取决于你初始化时数据源的格式。

通过destroy可以销毁该插件。

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

Bootstrap-Typeahead自动补全插件的github地址为：https://github.com/bassjobsen/Bootstrap-3-Typeahead