Bootstrap中Typeahead组件的介绍（代码示例）

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

本篇文章给大家带来的内容是关于Bootstrap中Typeahead组件的介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete，功能很强大，但是，使用上并不太方便。这里我们将介绍一下这个组件的使用。（免费课程推荐：bootstrap教程）

第一，简单使用

首先，最简单的使用方式，就是直接在标记中声明，通过 data-provide="typeahead"　来声明这是一个 typeahead 组件，通过 data-source= 来提供数据。当然了，你还必须提供 bootstrap-typeahead.js 脚本。

<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="margin: 50px 50px">
<label for="product_search">Product Search: </label>
<input id="product_search" type="text" data-provide="typeahead"
     data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
</body>
</html>

通常，我们使用脚本来填充数据，那么，页面可以变成如下的形式。

<html> <head> <link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div style="margin: 50px 50px"> <label for="product_search">Product Search: </label> <input id="product_search" type="text" data-provide="typeahead"> </div> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/bootstrap-typeahead.js"></script> <script> $(document).ready(function($) { // Workaround for bug in mouse item selection $.fn.typeahead.Constructor.prototype.blur = function() { var that = this; setTimeout(function () { that.hide() }, 250); }; $('#product_search').typeahead({ source: function(query, process) { return ["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]; } }); }) </script> </body> </html>

注意，我们提供了一个 source 函数来提供数据，这个函数接收两个参数，第一个参数 query 表示用户的输入，第二个参数是 process 函数，这个 process 函数是 typeahead 提供的，用来处理我们的数据。

如果你希望通过 Ajax 调用从服务器端获取匹配的数据，那么，在异步完成的处理函数中，你需要获取一个匹配的字符串数组，然后，将这个数组作为参数，调用 process 函数。

第三，支持 Ajax 获取数据

说了半天，数据都是从本地获取的，到底如何从服务器端获取数据呢？

其实很简单，在 source 函数中，自己调用 Ajax 方法来获取数据，主要注意的是，在获取数据之后，调用 typeahead 的 process 函数处理即可。

$('#product_search').typeahead({
    source: function (query, process) {
        var parameter = {query: query};
        $.post('@Url.Action("AjaxService")', parameter, function (data) {
            process(data);
        });
    }
});当然了，在服务器上，你需要创建一个服务来提供数据，这里，我们演示使用随机数来生成一组随机数据的方法。
public ActionResult AjaxService(string query)
{
    System.Collections.ArrayList list
        = new System.Collections.ArrayList();
    System.Random random = new Random();
    for (int i = 0; i < 20; i++)
    {
        string item  = string.Format("{0}{1}", query, random.Next(10000));
        list.Add(item);
    }
    return this.Json(list);
}第四，使用 highlighter 和 updater
除了使用 source 函数之外，还可以使用 highlighter 函数来特别处理匹配项目的显示，使用 updater 函数，在选择了某个匹配项之后，做出一些后继的处理。
默认的 highlighter 是这样实现的，item 是匹配的项目，找到匹配的部分之后，使用 <strong> 加粗了。
highlighter: function (item) {
    var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$  关键词：Bootstrap中Typeahead组件的介绍（代码示例）