Bootstrap 2 Typeahead
Typeahead 在用户填写表单时，为用户提供提示或数据
本章我们将学习如何使用 Bootstrap 创建 Typeahead
什么是必需的
必须引入 jquery.js 和 bootstrap.min.js
<script src="/static/lib/bootstrap/2.3.2/docs/assets/js/jquery.js"></script> <script src="/static/lib/bootstrap/2.3.2/docs/assets/js/bootstrap.min.js"></script>
范例
下面的范例演示了如何不编写 JavaScript 只通过标记创建 Typeahead
<div class="well"> <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="["Ahmedabad","Akola","Asansol","Aurangabad","Bangaluru","Baroda","Belgaon","Berhumpur","Calicut","Chennai","Chapra","Cherapunji"]"> </div> <script src="/static/lib/bootstrap/2.3.2/docs/assets/js/jquery.js"></script> <script src="/static/lib/bootstrap/2.3.2/docs/assets/js/bootstrap.min.js"></script>
运行以上范例，演示如下
通过 JavaScript 调用 typeahead
我们可以通过 javascript 调用 typeahead，并通过使用不同的选项加强功能
$('#example').typeahead()
其中 'example' 是我们要应用 typeahead 的 input 字段的 id
<div class="well"> <input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" /> </div> <script src="/static/lib/bootstrap/2.3.2/docs/assets/js/jquery.js"></script> <script src="/static/lib/bootstrap/2.3.2/docs/assets/js/bootstrap.min.js"></script> <script> var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON']; $('#search').typeahead({source: subjects}) </script>
运行以上范例，演示如下
选项
下表列出了 Typeahead 可用的选项
| 选项 | 说明 |
|---|---|
| source | 规定包含查询时要显示的值的数据源 值的类型是 array，默认值是 [ ] |
| items | 规定查询时要显示的条目的最大值 数据类型是 number，默认值是 8 |
| matcher | 决定查询是否匹配条目。带有一个单一的参数，即要测试查询的条目 当前查询通过 this.query 访问。返回一个布尔值 true，表示查询匹配。数据类型是 function。默认情况下是大小写不敏感的 |
| sorter | 用于自动分类结果 带有一个单一的参数，即具有 typeahead 实例范围的条目。当前查询通过 this.query 访问 数据类型是 function 默认值是精确匹配的，其他的值还可以是大小写敏感、大小写不敏感 |
| highlighter | 用于自动高亮突出显示结果 带有一个单一的参数，即具有 typeahead 实例范围的条目 数据类型是 function 默认情况下是高亮突出显示所有默认的匹配项 |
方法
.typeahead(options)
它初始化了一个带 Typeahead 的输入框