使用 Bootstrap Typeahead 组件

时间 2019-12-12

标签使用 bootstrap typeahead 组件栏目 Bootstarp 繁體版

原文原文链接

Bootstrap 中的 Typeahead 组件就是一般所说的自动完成 AutoComplete，功能很强大，可是，使用上并不太方便。这里咱们将介绍一下这个组件的使用。css

第一，简单使用

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

第二，使用脚本填充数据

一般，咱们使用脚原本填充数据，那么，页面能够变成以下的形式。jquery

<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 提供的，用来处理咱们的数据。bootstrap

若是你但愿经过 Ajax 调用从服务器端获取匹配的数据，那么，在异步完成的处理函数中，你须要获取一个匹配的字符串数组，而后，将这个数组做为参数，调用 process 函数。数组

第三，支持 Ajax 获取数据

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

其实很简单，在 source 函数中，本身调用 Ajax 方法来获取数据，主要注意的是，在获取数据以后，调用 typeahead 的 process 函数处理便可。dom

$('#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 函数，在选择了某个匹配项以后，作出一些后继的处理。ide

默认的 highlighter 是这样实现的，item 是匹配的项目，找到匹配的部分以后，使用 <strong> 加粗了。函数

highlighter: function (item) {
    var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
    return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
        return '<strong>' + match + '</strong>'
    })
}

而 updater 的默认实现就更加简单了。

updater: function (item) {
    return item
}

咱们能够重写这两个函数，来实现自定义的处理。

<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"];
      },
 
      highlighter: function(item) {
         return "==>" + item + "<==";
      },
 
      updater: function(item) {
         console.log("'" + item + "' selected.");
      return item;
}
});
})
</script>
</body>
</html>

第五，使用对象数据

实际上，你的数据多是一组对象而不是一个字符串数组，下面的例子中，咱们使用一个产品对象的数组来讲明，每一个产品对象有一个 id 编号，还有名称 name 和价格 price .

<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>
    <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
            }
            ];

            $('#product_search').typeahead({
                source: function (query, process) {
                    var results = _.map(products, function (product) {
                        return product.name;
                    });
                    process(results);
                },

                highlighter: function (item) {
                    return "==>" + item + "<==";
                },

                updater: function (item) {
                    console.log("'" + item + "' selected.");
                    return item;
                }
            });
        })
    </script>

</body>
</html>

第六，高级用法

咱们但愿可以在提示中显示产品的更加详细的信息。

首先，修改咱们的 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>

参考资料

Twitter Boostrap Typeahead Tutorial

typeahead 下载地址

underscore 下载地址