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
是我们的一个自定义函数。

图片 1

updater: function (id) {
    var product = _.find(products, function (p) {
        return p.id == id;
    });
    that.setSelectedProduct(product);
    return product.name;
}

图片 2

下面是一体底代码。

<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

相关文章