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自动补全插件

数据源

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。

参数 类型 默认值 描述
source 数组或函数 [] 提供查询的数据源，可以是一个字符串数组或者一个方法，该方法有两个参数：query 输入值和process回调函数，回调函数可以在返回数据源的时候调用，以将数据处理成typeahead能识别的标准数据源。
items 数值 8 显示在下拉菜单中的匹配数量的最大值。也可以设置为'all'。
minLength 数值 1 触发自动补全功能所需的最少输入字符个数。
showHintOnFocus boolean 或 'all' false 是否在输入框聚焦时显示提示数据。如果设置为true，所有匹配项会被显示。如果设置为'all'，则会显示所有的选项。
scrollHeight 数值或函数 0 Number of pixels the scrollable parent container scrolled down。
matcher 函数 不区分大小写 决定查询是否匹配条目。带有一个单一的参数，即要测试查询的条目。当前查询通过this.query访问。返回一个布尔值true，表示查询匹配。数据类型是 function。默认情况下是大小写不敏感的。
sorter 函数 exact match, case sensitive, case insensitive 该方法用于给数据源排序。带有一个单一的参数，即具有 typeahead 实例范围的条目。当前查询通过this.query访问。数据类型是function。默认值是精确匹配的，其他的值还可以是大小写敏感、大小写不敏感。
updater 函数 返回选择的项 该方法用于返回选择的搜索项，有一个入参item，表示typeahead数据源中返回的单个实例。
highlighter 函数 highlights all default matches 用于自动高亮突出显示结果。带有一个单一的参数，即具有typeahead实例范围的条目。数据类型是function。默认情况下是高亮突出显示所有默认的匹配项。
displayText 函数 item.name || item 该方法获取源项的文本表示的方法。
autoSelect boolean true 是否自动选择第一个匹配项。
afterSelect 函数 $.noop() 在选择一个匹配项之后的回调函数。
delay 整数 0 在每次查找之间添加一定的延迟时间。
appendTo jquery对象 null 默认情况下，匹配项菜单会被添加到输入框下面。你可以通过该参数，将匹配项菜单添加到其它地方，例如添加到另外一个div中。
fitToElement boolean false 设置为true时，将匹配项菜单的宽度和输入框的宽度一致。
addItem JSON对象 false 在列表项之后添加新的项。

方法

Bootstrap-Typeahead的可用方法有：

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

通过destroy可以销毁该插件。

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

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