Bootstrap 中的 Typeahead 组件其实就是嵌入到其中的typeahead.js插件，可以完成输入框的自动匹配功能，在通过一些人工的调整基本可以胜任所有的匹配功能和场景，下面介绍下简单的使用思路：

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

如：

<html>
<head>
<script src="http://libs.baidu.com/bootstrap/2.2.1/js/bootstrap.min.js"></script>
 <link href="http://libs.baidu.com/bootstrap/2.2./cs/bootstrap.min.css" rel="stylesheet">
<body>

<div style="margin: 100px 50px">

<label for="search">搜索：</label>

<input id="search" type="text" data-provide="typeahead"

     data-source='["2013", "my2013", "wode2013","my is wode"]'>

</div>

<script src="js/jquery-1.8.3.min.js"></script>

<script src="js/bootstrap-typeahead.js"></script>

</body>

</html>

当然更多的情况下我们还是通过script脚本来提供数据的：

<html>

<head>

<script src="http://libs.baidu.com/bootstrap/2.2.1/js/bootstrap.min.js"></script>

 <link href="http://libs.baidu.com/bootstrap/2.2./cs/bootstrap.min.css" rel="stylesheet">

<body>

<div style="margin: 100px 50px">

<label for="search">搜索： </label>

<input id="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($) {

   $.fn.typeahead.Constructor.prototype.blur = function() {

      var that = this;

      setTimeout(function () { that.hide() }, );

   };

   $('#search').typeahead({

      source: function(query, process) {

         return ["", "my2013", "wode2013","my is wode"];

      }

   });

})

</script>

</body>

</html>

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

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

$('#product_search').typeahead({

    source: function (query, process) {

        var parameter = {query: query};

        $.post('@Url.Action("AjaxService")', parameter, function (data) {

            process(data);

        });

    }

});

高级用法：

我们希望能够在提示中显示产品的更加详细的信息。

首先，修改我们的 source 函数，原来这个函数返回一个字符串的数组，现在我们返回一个产品 id 的数组，但是，process 函数期望得到一个字符串数组的参数，所以，我们将每个 id 都转换为字符串类型。

然后，typeahead 组件就会调用 matcher 函数来检查用户的输入是否与某个项目匹配，你可以使用产品的 id 在产品列表中获取产品对象，然后检查产品的名称与用户的输入是否匹配。

默认的 matcher 直接使用用户的输入来匹配，我们如果使用 id 的话，显然不能匹配，我们需要重写 matcher 函数。

matcher 接收一个当前项目的字符串，用户当前的输入为 this.query，匹配返回 true, 否则返回 false. 默认的 matcher 如下：

, matcher: function (item) {

    return ~item.toLowerCase().indexOf(this.query.toLowerCase())

}

将它重写为永远匹配，直接返回 true。而在 highlighter 中将显示结果替换为希望的产品名称和价格组合。在下一步的 highlighter 中，我们使用 Underscore 组件中的 find 方法，通过产品的 id 在产品列表中获取产品对象，然后，显示产品名称和价格的组合。

highlighter: function (id) {

    var product = _.find(products, function (p) {

        return p.id == id;

    });

    return product.name + " ($" + product.price + ")";

}

默认的 updater 直接返回当前匹配的内容，我们这里是一个 id, 需要重写。

updater: function (item) {

    return item

}

在用户选择之后，typeahead 将会调用 updater 函数，我们通过产品的 id 在产品列表中获取产品对象，然后

最后，updater 函数返回一个产品名称的字符串，为输入框提供内容。setSelectedProduct 是我们的一个自定义函数。

updater: function (id) {

    var product = _.find(products, function (p) {

        return p.id == id;

    });

    that.setSelectedProduct(product);

    return product.name;

}

下面是全部的代码。

<html>

<head>

    <link href="~/Content/dist/css/bootstrap.min.css" rel="stylesheet" />

</head>

<body>

    <div style="margin: 50px 50px">

        <label for="product_search">Product Search: </label>

        <input id="product_search" type="text" data-provide="typeahead">

        <div id="product" style="border-width: 1; padding: 5px; border-style: solid"></div>

    </div>

    <script src="~/Content/dist/js/jquery.js"></script>

    <script src="~/Content/dist/js/bootstrap-typeahead.js"></script>

    <script src="~/Content/dist/js/underscore-min.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() }, );

            };

            var products = [

            {

                id: ,

                name: "Deluxe Bicycle",

                price: 499.98

            },

            {

                id: ,

                name: "Super Deluxe Trampoline",

                price: 134.99

            },

            {

                id: ,

                name: "Super Duper Scooter",

                price: 49.95

            }

            ];

            var that = this;

            $('#product_search').typeahead({

                source: function (query, process) {

                    $('#product').hide();

                    var results = _.map(products, function (product) {

                        return product.id + "";

                    });

                    process(results);

                },

                matcher: function (item) {

                    return true;

                },

                highlighter: function (id) {

                    var product = _.find(products, function (p) {

                        return p.id == id;

                    });

                    return product.name + " ($" + product.price + ")";

                },

                updater: function (id) {

                    var product = _.find(products, function (p) {

                        return p.id == id;

                    });

                    that.setSelectedProduct(product);

                    return product.name;

                }

            });

            $('#product').hide();

            this.setSelectedProduct = function (product) {

                $('#product').html("Purchase: <strong>" + product.name + " ($" + product.price + ")</strong>").show();

            }

        })

    </script>

</body>

</html>

以上参考资料修改自其它作者，原文可访问：http://www.cnblogs.com/haogj/p/3376874.html

												


											
Bootstrap中的 Typeahead 组件的更多相关文章
	

    
						
  1. Bootstrap 中的 Typeahead 组件 -- AutoComplete
		
    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...
    
		
    2. 
								
  2. bootstrap中的dropdown组件扩展hover事件
		
    bootstrap的下拉组件,需要点击click时,方可展示下拉列表.因此对于喜欢简单少操作的大家来说,点击一下多少带来不便,因此,引入hover监听,鼠标经过自动展示下拉框.其实在bootstrap ...
    
		
    3. 
						
  3. 使用 Bootstrap Typeahead 组件
		
    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...
    
		
    4. 
						
  4. bootstrap课程5 bootstrap中的组件使用的注意事项是什么
		
    bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...
    
		
    5. 
						
  5. Android studio 3.4.1 使用 bootstrap 中的组件实例
		
    电脑环境: ubuntu18.04 + Android studio 3.4.1 + bootsrtap4 Android studio中板式设计主要使用的 XML 布局文件,而在bootstrap中 ...
    
		
    6. 
						
  6. bootstrap学习之二-组件
		
    一.bootstrap字体图标 以span的形式出现,通常可以用于一个button或者其他元素的内文本, <span class="glyphicon glyphicon-sort-b ...
    
		
    7. 
						
  7. Bootstrap中的less基础
		
    在线编译 因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到.比如 http://less.cnodejs.net http://www.ostools.net/less  一般都有 ...
    
		
    8. 
						
  8. 57、Bootstrap中文文档
		
    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 一.Bootstrap的下载 Bootstrap,由Twitter的设计师Mark Otto和Jaco ...
    
		
    9. 
						
  9. 12、Bootstrap中文文档（其它插件分享）
		
    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【转】Java 枚举7常见种用法
			
    原文网址:http://softbeta.iteye.com/blog/1185573 Java 枚举7常见种用法 博客分类: java java枚举enmu  原创地址:http://blog.li ...
    
			
    2. 
						
  2. 【动态规划】Vijos P1680 距离
			
    题目链接: https://vijos.org/p/1680 题目大意: 设有字符串X,我们称在X的头尾及中间插入任意多个空格后构成的新字符串为X的扩展串,如字符串X为”abcbcd”,则字符串“ab ...
    
			
    3. 
						
  3. Binary Tree Preorder Traversal —— LeetCode
			
    Given a binary tree, return the preorder traversal of its nodes' values. For example:Given binary tr ...
    
			
    4. 
						
  4. Java---注解、类加载器-加强-实现运行任意目录下class中加了@MyTest的空参方法
			
    做自己的类加载器 虚拟机的核心是通过类加载器来加载.class文件,然后进行相应的解析执行.那么我们可以自己做类加载器,手动加载需要的.class以进行解析执行,从而扩展虚拟机的功能. 以下内容摘自A ...
    
			
    5. 
						
  5. 代码审查工具之PMD操作指南
			
    上周客户要求对OA系统的代码质量进行了一个整体审查,并且要出一份报告给领导. 为此花了半天时间把代码审查工具PMD琢磨了下,现将具体操作步骤描述如下,以供大家参考! 1 前言 质量是衡量一个软件是否成 ...
    
			
    6. 
						
  6. SRM 600(1-250pt,500pt)
			
    DIV1 250pt 题意:给定一个vector<int>A,若能从里面选出一些数,使得他们按位或的值为x,则称x为吉利数.给定k,问最少要从A里面去掉多少个数,才能使k变为不吉利数. 解 ...
    
			
    7. 
						
  7. inux常用命令大全
			
    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS  ...
    
			
    8. 
						
  8. 只对safari起作用的css hack
			
    下面的css代码只对safari browser 起作用: .test { width: 200px; height:50px; background-color:red; padding-top:  ...
    
			
    9. 
						
  9. 一些正则在js使用方法
			
    输入框直接正则判断 <input type="password" name="pwd" placeholder="密码只能以数字\英文\@\.& ...
    
			
    10. 
						
  10. Excel导入mysql数据库
			
    步骤一:选取要导入的数据快儿,另外要多出一列,如下图:    步骤二:  将选中的数据快儿拷贝到一个新建的表格工作薄,然后“另存为” ->“文本文件(制表符分割)(*.txt)”,假如存到“D: ...
    
			
    11.