- A+
一、插件介绍
bootstrap-typeahead 下载地址： https://github.com/bassjobsen/Bootstrap-3-Typeahead/
bootstrap-suggest 下载地址：https://github.com/veenter/bootstrap-suggest-plugin
select2 下载地址：https://select2.org/
二、插件对比
1. 引入方式
bootstrap-typeahead 基于 bootstrap 基础，使用十分简单， 需要引入 bootstrap-typeahead.min.js 并且在 input 框内加入 data-provide = "typeahead" 即可。
bootstrap-suggest 也基于 bootstrap 基础，需要引入bootstrap-suggest.js。
select2 基于 jquery ,需要引入 select2.full.js、select2.min.js以及 jquer1.8 以上。
从引入方式上来讲，typeahead 和 suggest 需要依赖于 bootstrap，而select2则不需要。因此项目如果基于bootstrap 开发，可优先考虑 typeahead 和 suggest；反之，则优先考虑 select2。
2. 调用方式
bootstap-typeahead 可以直接在 input 输入框内 加入 data-provide = "typeahead" ，且在js中加入如下代码：
$("#input").typeahead(option);
bootstrap-suggest 可以直接使用 js 调用
$("#input").bsSuggest(option);
select2 调用有两种方式：①可以直接在 select 上添加 "select2" 类 ；②可以在 js 中添加如下代码：
$("#select").select2(option);
从调用方式上来讲，对于静态数据，select2 十分方便，只需添加 “select2”类 ；对于动态数据，都需要在 js 中添加 调用 url 地址。
3. 动态数据加载以及回调方式
bootstrap-typeahead 动态加载数据需要在 js 中配置 url 、参数、异步方法，回调方法则需要自己开发。
bootstrap-suggest 动态数据则需要在 js 中配置 url 即可。但是参数默认拼接在 url 后，所以参数拼接方法需要重写。此外，suggest 的回调方法在需求比较复杂时，无法满足，需要重写。
select2 动态加载数据 需要在 js 中配置 url 、参数、调用方式来获取数据，无需配置回调。但是，返回的数据格式必须严格按照 select2 规定的 id、text 格式。
从数据加载以及回调方式上来讲，typeahead 只需要一个简单的 ajax 请求即可，回调方式较为灵活；select2 的加载方式比较灵活，但是返回格式太为死板；suggest 的加载方式略坑，需要自己重写，回调在复杂情况下需要重写。
4. 展示方式
bootstrap-typeahead 的展示方式比较传统，只能展示一列数据，其余的数据只能保持在js 中， 通过回调方式获取。
bootstrap-suggest 的展示方式十分优化，可以展示一个表格且表头、数据均可以自定义，十分灵活。且可以通过重写回调方法，之前获取其他数据。
select2 由于建立在 select 控件之上，所以只能展示一列数据，而且回调方法无法重写，在复杂需求时，略感无力。
从展示方式上来讲，suggest 无疑完胜其余两种，尤其是其灵活的表格。
三、总结
bootstrap-typeahead 的调用方式、加载方式简单，适用于业务逻辑简单的场景。
bootstrap-suggest 虽然参数拼接方法需要重写，但其灵活的展示方式足以适应各种需求。因此，在复杂的需求中，无疑是最好的选择。
select2 的调用方式虽然简单，但其回调格式十分死板其无法重写回调方法。因此，select2适应于静态数据的加载。
