Bootstrap组件系列之福利篇几款好用的组件（推荐二）

在上篇文章给大家介绍了Bootstrap组件系列之福利篇几款好用的组件(推荐)，接下来本文给大家介绍Bootstrap组件系列之福利篇几款好用的组件（推荐二），感兴趣的朋友一起学习吧！

七、多值输入组件manifest

关于文本框的多值输入，一直是一个比较常见的需求，今天博主推荐一款好用的多值输入组件给大家，不要谢我，请叫我“红领巾”！

1、效果展示

本地多值输入框

远程多值输入框

2、源码说明

感谢开源社区，感谢那些喜欢分享的可爱的人儿。开源地址。

3、代码示例

（1）本地多值输入

首先需要引用如下几个文件

bootstrap的Js和css文件并非必须，本文是为了样式好看，所以将其引用进来。manifest组件不依赖bootstrap，但是依赖jQuery，除此之外还需要引用jquery.manifest.css、jquery.ui.widget.js、jquery.marcopolo.js三个文件。

然后就是html和js的初始化

通过简单如上简单的步骤，上面的效果就可出来，是不是很简单。简单来看看它的一些用法

 //常用属性：得到文本框里面所有项的集合
var values = $('#txt_man').manifest('values');
//常用方法1：移除最后一项
$('#txt_man').manifest('remove', ':last');
//常用方法2：项文本框里面新增一项。第二个参数的格式由JSON数据的格式决定
$('#txt_man').manifest('add', {
id: "1",
name:"ABC"
});
//常用方法3：获取远程搜索到的数据的列表
$('#txt_man').manifest('list');
//常用事件1：组件的新增项事件
$('#txt_man').on('manifestadd', function (event, data, $item, initial) {
//alert("新增的项为："+data);
});
//常用事件2：组件的移除项事件
$('#txt_man').on('manifestremove', function (event, data, $item) {
});
//常用事件3：远程调用时通过键盘选择项变化的事件
$('#txt_man').on('manifestselect', function (event, data, $item) {
});

（2）远程多值输入

远程搜索输入的方式，需要我们提供一个url地址，获取数据，然后返回到浏览器。本文为了简单，就直接用源码网站上面的url来展示效果了。

首先需要引用的js文件

和上面的相比，多了一个文件jquery.marcopolo.js的引用。

然后就是html和js的初始化

至于每一个参数的意义，园友们有需要可以研究下，应该不难理解。博主简单监视了一下这个远程搜索方法的返回值

如果有园友打算自己用这个远程的方法，可以参考这个数据格式去实现。

八、文本框搜索组件bootstrap-typeahead

其实关于文本框搜索的功能，很多组件都带有这个功能，比如原来博主用过的jQuery UI里面就有一个autocomplete组件可以实现自动完成。而bootstrap文本框的自动搜索组件，网上也是层出不穷，今天之所以选择这个组件是因为觉得它和bootstrap的风格比较类似，而且组件比较小，简单实用。

1、效果展示

本地静态搜索（数据源在本地）

远程搜索（数据源通过ajax请求远程获取）

2、源码说明

源码说明

3、代码示例

首先需要引用的文件：主要包含一个css和一个js文件。需要jQuery和bootstrap的支持。

然后组件的初始化

数据源在本地

数据源通过ajax请求获取

后台对应的测试方法

public JsonResult TypeaheadData()
{
var lstRes = new List