一、简介
1、jQuery Select2是一个功能强大的选择性输入框插件，可将普通的多项选择框转换为自动搜索的下拉列表框，适用于各种Web应用程序。
2、Select2是世界上最流行的下拉框选择插件之一，它通过渲染一个单选或多选的下拉框，带有自动完成和搜索功能，更加友好和便捷。
二、特点
1、增加了搜索功能：在大数据量下，使用输入框来快速搜索数据，提高了筛选的效率；
2、可定制性强：用户可以通过关键字匹配、自定义输入内容和渲染函数、多选、后台数据请求等强大的功能拓展Selct2插件；
3、可自定义选择位置：用户可以通过设定Select2框架所属的位置，使它成为任意组件的子组件。
三、使用方法
1、下载Select2插件（下载地址）并引入相关文件：
“`
“`
2、添加HTML代码：
“`
Option 1
Option 2
Option 3
Option 4
Option 5
“`
3、初始化Select2插件：
“`
$(document).ready(function() {
$(‘.multi-select’).select2();
});
“`
四、实例展示
1、单选下拉框：
“`
Option 1
Option 2
Option 3
Option 4
Option 5
$(document).ready(function() {
$(‘.single-select’).select2();
});
“`
2、多选下拉框：
“`
Option 1
Option 2
Option 3
Option 4
Option 5
$(document).ready(function() {
$(‘.multi-select’).select2();
});
“`
3、Ajax请求数据源下拉框：
“`
$(document).ready(function() {
$(‘.ajax-select’).select2({
ajax: {
url: ‘https://api.github.com/search/repositories’,
dataType: ‘json’,
delay: 250,
data: function(params) {
return {
q: params.term,
page: params.page
};
},
processResults: function(data, params) {
params.page = params.page || 1;
return {
results: data.items.map(function(item) {
return {
id: item.id,
text: item.full_name
};
}),
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
placeholder: 'Search for a repository',
minimumInputLength: 1,
templateResult: function(repo) {
if (repo.loading) {
return repo.text;
}
var $container = $('' +
'
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/197154.html
微信扫一扫 
支付宝扫一扫 