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
Bootstrap 3 RC 1 中的 typeahead JavaScript 模块在哪里?