Select 2
Select2
官方文档
Github
感谢两位作者 Kevin Brown & Igor Vaynberg
原生 <select> 标签没有 美化和 DOM 事件，没有模糊搜索，从后端获取数据时要自行插入选项，小码农真是伤不起。于是在 AdminLTE 中找到一款叫 Select2 的 jQuery 插件。它支持多语言、远端数据搜索、选项分页。这一切还基于简洁易懂的 jQuery。
快速使用
1.在 <head> 标签内加入 CDN 地址，当然别忘了这玩意需要 jQuery ：
<link href="https://cdn.staticfile.org/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/select2/4.0.3/js/select2.min.js"></script>2.使用 <select> 标签来初始化该插件：
HTML
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>JavaScript
$(document).ready(function() {
$('select').select2({
placeholder:'Select a state',
});
});Result
往往在项目中会遇到更复杂的需求，比如通过搜索关键字提交到后端，获取返回的数据到本地渲染再进行选取。
通过搜索仓库内商品的货号或条形码甚至是品名，从后端获取一个 JSON 对象，交给 Select2 内置的函数渲染成下拉列表， 编写对应的选择事件，完成整个组件的交互。
约定
API 接口是前后端交换的一种方式，使用 JSON 数据格式，以多个或者单个对象形式返回对象数组。这些数据直接返回至 Ajax 。栗子：
return.json
{
"119": {
"id": "119",
"name": "Apple",
"price": "12"
},
"120": {
"id": "120",
"name": "banana",
"price": "8"
}
}
官方的栗子
先来看看官方是怎么运用 jQuery's AJAX 来获取并处理数据给 Select2 。
后面我们实现自己的案例时可以上面约定好的 return.json 数据格式暂时取代后端提供的 API 。
这里的代码引用了官方的栗子 http://select2.github.io/examples.html
$(".js-data-example-ajax").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});
传入的参数
ajax
传入的 ajax 对象的某些属性与 jQuery's AJAX 非常相似：
url API 请求的地址
dataType 数据类型
delay 每次键入至请求时的延迟时间
data API 请求的地址时带上的参数
processResults API 返回数据的处理函数
cache 缓存？