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() }, );
};
$('#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 组件的更多相关文章
- Bootstrap 中的 Typeahead 组件 -- AutoComplete
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...
- bootstrap中的dropdown组件扩展hover事件
bootstrap的下拉组件,需要点击click时,方可展示下拉列表.因此对于喜欢简单少操作的大家来说,点击一下多少带来不便,因此,引入hover监听,鼠标经过自动展示下拉框.其实在bootstrap ...
- 使用 Bootstrap Typeahead 组件
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...
- bootstrap课程5 bootstrap中的组件使用的注意事项是什么
bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...
- Android studio 3.4.1 使用 bootstrap 中的组件实例
电脑环境: ubuntu18.04 + Android studio 3.4.1 + bootsrtap4 Android studio中板式设计主要使用的 XML 布局文件,而在bootstrap中 ...
- bootstrap学习之二-组件
一.bootstrap字体图标 以span的形式出现,通常可以用于一个button或者其他元素的内文本, <span class="glyphicon glyphicon-sort-b ...
- Bootstrap中的less基础
在线编译 因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到.比如 http://less.cnodejs.net http://www.ostools.net/less 一般都有 ...
- 57、Bootstrap中文文档
给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 一.Bootstrap的下载 Bootstrap,由Twitter的设计师Mark Otto和Jaco ...
- 12、Bootstrap中文文档（其它插件分享）
给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...
随机推荐
- Merge Intervals——LeetCode
Given a collection of intervals, merge all overlapping intervals. For example,Given [1,3],[2,6],[8,1 ...
- 《algorithm puzzles》——谜题
这篇文章开始正式<algorithm puzzles>一书中的解谜之旅了! 狼羊菜过河: 谜题:一个人在河边,带着一匹狼.一只羊.一颗卷心菜.他需要用船将这三样东西运至对岸,然而,这艘船空 ...
- HDU2059（龟兔赛跑）
龟兔赛跑 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- 【模拟赛】BYVoid魔兽世界模拟赛 解题报告
题目名称(点击进入相关题解) 血色先锋军 灵魂分流药剂 地铁重组 埃雷萨拉斯寻宝 源文件名(.c/.cpp/.pas) scarlet soultap subway eldrethalas 输入文件名 ...
- 考研路茫茫--单词情结 - HDU 2243(AC自动机+矩阵乘法)
分析:与poj的2778差不多的,求出来所有的情况然后减去不包含的就行了,这次使用了一下kuangbin的那种自动机写法,确实还不错,因为尤是在建立矩阵的时候更加方便. 代码如下: ======= ...
- Finding Palindromes - 猥琐的字符串（Manacher+trie）
题目大意:有 N 个字符串,所有的字符串长度不超过 200W 任意俩俩字符串可以自由组合,问组合的字符串是回文串的个数有多少个? 分析:这是一个相当猥琐的字符串处理,因为没有说单个的字符串最少多长 ...
- 「书评」SAP内存计算——HANA
因为工作关系,长期跟SAP打交道,所以去年就对HANA有了一些了解,只是公司目前的应用规模还较小,暂时没有上马HANA的打算,但是提前作一些学习还是很有必要的.正好清华大学出版社最近出版了这本< ...
- MySQL的InnoDB表如何设计主键索引-转自淘宝MySQL经典案例
创建a表 id主键 CREATE TABLE `a` (`id` bigint(20) NOT NULL AUTO_INCREMENT ,`message_id` int(11) NOT NULL,` ...
- angularJS promise $q
Promise 一 介绍 1.什么是promise 我们知道JavaScript语言的执行环境是“单线程”,所谓单线程,就是一次只能够执行一个任务,如果有多个任务的话就要排队,前面一个任务完成后才可以 ...
- keil中for循环变量递减，无法跳出循环的问题
定义j时应注意其变量类型char,此循环当j=0时,再执行一次则keil中j=0XFF,而不是-1,所以无法跳出循环.但在vc6.0中是可以跳出循环的. 解决办法如下:不能让j的值为负数 uchar ...