Bootstrap3使用typeahead插件实现自动补全功能

下面会详细讲解如何使用 Bootstrap3 的 typeahead 插件来实现自动补全功能。

1. 安装 Bootstrap3 和 typeahead 插件

首先需要在网页中引入 Bootstrap3 和 typeahead 插件的文件。在 head 部分加入以下代码：

<!-- 引入 Bootstrap3 样式表文件 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="XXXX" crossorigin="anonymous">

<!-- 引入 jQuery 和 Bootstrap3.js 文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="XXXX" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="XXXX" crossorigin="anonymous"></script>

<!-- 引入 typeahead.js 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js" integrity="XXXX" crossorigin="anonymous"></script>

2. 添加 HTML 元素

接下来需要在 HTML 中添加一个 input 输入框，用于输入搜索关键字。

<!-- 输入框 -->
<input type="text" id="myInput" placeholder="请输入关键字">

3. 初始化 typeahead 插件

在 JS 中需要添加以下代码进行 typeahead 插件的初始化：

// 定义一个数组，用于演示自动补全的功能
var myData = ['Java', 'JavaScript', 'Python', 'Ruby', 'Swift', 'PHP'];

// 初始化 typeahead 插件
$('#myInput').typeahead({
    source: myData
});

这样就可以实现最基本的自动补全功能了。

4. 自定义模板

如果需要自定义自动补全列表的样式，需要先定义一个模板。

// 定义一个模板
var myTemplate = [
    '<p class="my-class">{{value}}</p>'
].join('');

模板中可以使用 Mustache.js 模板引擎。在 HTML 中添加以下代码：

<!-- 输入框 -->
<input type="text" id="myInput2" placeholder="请输入关键字">

<!-- 模板 -->
<script id="myTemplate" type="text/template">
    <p class="my-class">{{value}}</p>
</script>

注意：模板的 id 必须与 JS 中的模板 id 一致。

然后在 JS 中添加以下代码：

// 初始化自动补全插件并使用模板
$('#myInput2').typeahead({
    source: myData,
    display: 'value',
    templates: {
        suggestion: function (context) {
            return Mustache.render($('#myTemplate').html(), context);
        }
    }
});

注意：display 参数指定模板中显示的内容，如果不指定，则默认显示数据的第一个值。

以上就是使用 Bootstrap3 的 typeahead 插件实现自动补全的完整攻略，希望能够对你有所帮助！