Bootstrap中的 Typeahead 组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bootstrap中的 Typeahead 组件相关的知识,希望对你有一定的参考价值。

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() }, 250);
   };
   $(#search).typeahead({
      source: function(query, process) {
         return ["2013", "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() }, 250);
            };

            var products = [
            {
                id: 0,
                name: "Deluxe Bicycle",
                price: 499.98
            },
            {
                id: 1,
                name: "Super Deluxe Trampoline",
                price: 134.99
            },
            {
                id: 2,
                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 组件的主要内容,如果未能解决你的问题,请参考以下文章

Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素

Rails + Bootstrap 标签输入 + typeahead

Typeahead.js 干扰 Bootstrap 输入组

Bootstrap 3 RC 1 中的 typeahead JavaScript 模块在哪里?

Bootstrap 3 typeahead.js - 通过 typeahead val 的一部分进行查询

从 Bootstrap typeahead 和 JSON 制作可点击的结果列表