jQuery Select2插件使用詳解

一、簡介

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 = $('' +
'