本文详细介绍了Select2.js插件的使用方法，包括单选、多选及拼音搜索功能。通过测试示例展示了如何引入所需文件，以及如何在源码中修改实现拼音搜索。还讲解了常用参数设置和事件，提供了完整的测试源码。
本文主要是对Select2插件常用使用方法的一些总结。包括其单选、多选、按照拼音搜索功能。并通过测试示例对其效果进行了验证。
一、效果图
二、 使用方式
1.使用前需要引入下面几个插件：
select2.css或者select2.min.css
select2.js或者select2.min.js
jquery-2.0.3.min.js
<link href="../../plugins/select2/css/select2.css" rel="stylesheet" />
<script src="../../plugins/select2/js/select2.js"></script>
<script src="../../plugins/jquery-2.0.3.min.js"></script>-
如果在使用select2单选搜索时想要能够按照拼音字母进行搜索，需要引入pinyin.js插件，并对select2.js源码进行修改。
<script src="../../plugins/pinyin/pinyin.js"></script>select2.js文件修改方式：
将select2.js文件中下面这部分代码屏蔽掉
var original = stripDiacritics(data.text).toUpperCase();
var term = stripDiacritics(params.term).toUpperCase();
// Check if the text contains the term
if (original.indexOf(term) > -1) {
return data;
}并在select2.js文件添加以下代码：
//拼音搜索功能
var original = '';
var original1 = '';
var term = stripDiacritics(params.term).toUpperCase();
if(stripDiacritics(data.text).toPinYin != undefined) {
var result = stripDiacritics(data.text).toPinYin();
original = result[0].indexOf(stripDiacritics(params.term).toUpperCase());
original1 = result[1].indexOf(stripDiacritics(params.term).toUpperCase());
if(original == -1 && original1 == -1) {
original = stripDiacritics(data.text).toUpperCase().indexOf(term);
}
}三、常用功能说明
-
常用参数设置含义
tags: true, // 根据搜索框创建option，默认false
maximumSelectionLength: 6, // 最多能够选择的个数
multiple: true, // 多选，默认false
data: initdata, // 下拉框绑定的数据
allowClear: true, // 清空，默认false
placeholder: '请添加或选择语言' // 占位提示符
maximumInputLength: 20, // 允许搜索长度
minimumResultsForSearch: 20, // 至少20个结果的时候显示搜索
minimumResultsForSearch: Infinity, // 永久隐藏搜索框
selectOnClose: true, // 结果显示高亮
closeOnSelect: false, // select选中关闭下拉框
separator: ",", // 分隔符 -
select2事件：
//置空
$eventSelect.val(null).trigger("change");
//选中
$eventSelect.on("selected", function (e) { })
//移除
$eventSelect.on("removed", function () { })
//多个事件
$eventSelect.on("close removed", function () { }) -
获取value和text
$("#xa").val();
$("#xa").select2("val");
$("#xa").select2('data').text ;四、测试源码示例
-
select2Test.html代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select2</title>
</head>
<body>
<link href="../../plugins/select2/css/select2.css" rel="stylesheet" />
<div>
<label style="width: 100px; font-size: 14px;">单选</label>
<select id="sel_menu" style="width: 400px;" >
<option value=""></option>
</select>
</div>
<div style="margin-top:20px;">
<label style=" width: 100px; font-size: 14px;">多选</label>
<select id="sel_menu2" multiple="multiple" style="width: 400px;"></select>
</div>
<div style="margin-top:20px;">
<label style="width: 100px; font-size: 14px;">多选(含选中项)</label>
<select id="sel_menu3" multiple="multiple" style="width: 400px;"></select>
</div>
<button onclick=getSelectedData() style ="margin-top: 20px;">多选选中值</button>
<script src="../../plugins/jquery-2.0.3.min.js"></script>
<script src="../../plugins/select2/js/select2.js"></script>
<script src="../../plugins/pinyin/pinyin.js"></script>
<script src="../../js/select2Test.js"></script>
</body>
</html>-
select2Test.js代码：
//下拉框数据
var initdata = ["Java", "JavaScript", "C++", "C#", "Python", "PHP"];
//选中数据
var selectedData = ["Java", "PHP"];
//初始化页面加载
$(document).ready(function () {
//初始化select2单选
initSelect2WithSearch();
//初始化select2多选（没有选中项）
initSelect2();
//初始化select2多选（包含选中项）
select2WithData(selectedData);
});
/**
* 初始化select2单选，默认带搜索功能。
*/
function initSelect2WithSearch() {
$("#sel_menu").select2({
tags: true,
placeholder: '请搜索或选择语言',
data: initdata,
allowClear: true
});
}
/**
* 初始化select2多选（没有选中项）
*/
function initSelect2() {
$("#sel_menu2").select2({
tags: true,
maximumSelectionLength: 5,
placeholder: '请添加或选择语言',
multiple: true,
maximumInputLength: 10,//允许长度
data: initdata,
});
}
/**
* 初始化select2多选（包含选中项）
*/
function select2WithData(selectedData) {
$("#sel_menu3").select2({
tags: true, //支持新增，默认为false
maximumSelectionLength: 6, //最多能够选择的个数
multiple: true, //支持多选，默认为false
data: initdata, //下拉框绑定的数据
allowClear: true, //支持清空，默认为false
placeholder: '请添加或选择语言' //提示语
}).val(selectedData).trigger('change'); //多选情况下给选中项的赋值
}
/**
* 获取多选框选中项的值
*/
function getSelectedData() {
var mulSelData = $("#sel_menu3").val().join(",");//获取多选输入框选中值的方式
alert("sel_menu3的选中项是：" + mulSelData);
}-
运行结果：
Select2.js使用笔记
构造函数：
2.5.2版本：
| 参数 | 类型 | 描述 |
| Width | 字符串 | 控制 宽度 样式属性的Select2容器div |
| minimumInputLength | int | 最小数量的字符 |
|
| maximumInputLength | int | 最大数量的字符 |
|
| minimumResultsForSearch | Int | 最小数量的结果 |
|
| maximumSelectionSize | int | 可选择的最大条目数 |
|
| placeholder | 字符串 | 选择初始值 |
|
| separator | 字符串 | 分隔符字符或字符串用来划定id |
|
| allowClear | 布尔 | 此选项只指定占位符 |
|
| multiple | 布尔 | Select2是否允许选择多个值 |
|
| openOnEnter |
| 打开下拉如果设置为true,当用户按下回车键,Select2关闭。 默认情况下启用这个选项。 |
|
| id | 函数 | 函数用于获取id从选择对象或字符串id存储代表的关键 |
|
| matcher | 函数 | 用于确定是否搜索词匹配一个选项时使用一个内置的查询功能 |
|
| sortResults | 函数 | 用于排序列表搜索之前显示的结果。 |
|
| formatSelection | 函数 | 函数用于呈现当前的选择 |
|
| formatResult | 函数 | 函数用来渲染结果, |
|
| formatResultCssClass | 函数 | 函数用于添加css类结果元素 |
|
| formatNoMatches | 字符串/函数 | 字符串包含“不匹配”消息,或 |
|
|
|
| 函数用于呈现信息 |
|
| formatSearching | 字符串/函数 | 字符串包含“搜索… “消息,或 |
|
|
|
| 函数用于呈现显示的消息 正在进行搜索。 |
|
| formatAjaxError | 字符串/函数 | 字符串包含消息“加载失败”,或 |
|
|
|
| 函数用于呈现信息 |
|
| formatInputTooShort | 字符串/函数 | 包含“搜索”输入太短消息的字符串,或 |
|
|
|
| 函数用于呈现信息。 |
|
| formatInputTooLong | 字符串/函数 | 包含“搜索”输入太短消息的字符串,或 |
|
|
|
| 函数用于呈现信息 |
|
| formatInputTooLong | 字符串/函数 | 包含“搜索输入字符串太长”消息,或 |
|
|
|
| 函数用于呈现信息。 |
|
| formatSelectionTooBig | 字符串/函数 | 字符串包含“你不能选择任何更多的选择”消息,或 |
|
|
|
| 函数用于呈现信息 |
|
| formatLoadMore | 字符串/函数 | 字符串/函数 |
|
| createSearchChoice | 函数 | 创建一个新的可选选择从用户的搜索词。 允许创建通过查询选择不可用 功能。 有用的用户可以创建动态的选择时,如“标签”usecase。 |
|
| createSearchChoicePosition | 函数/字符串 | 定义的位置插入元素 |
|
| initSelection | 函数 | 调用Select2创建允许用户初始化选择的值 select2附加到元素 |
|
| tokenizer | 函数 | 记号赋予器函数可以处理后输入搜索框的输入每一个按键和提取 并选择选择。 |
|
| tokenSeparators | 函数 | 一个字符串数组定义标记为默认的分隔符 分词器 功能。 默认情况下,此选项设置为一个空数组标记这意味着使用默认 编译器是禁用的。 通常是明智的,设置该选项值相似 [‘,’,’ ‘] 。 |
|
| query | 函数 | 函数用于搜索词的查询结果。 |
|
| ajax | 对象 | 选择内置的ajax查询功能。 这个对象作为快捷方式有手动编写一个函数,执行ajax请求。 内置函数支持更高级的特性,比如节流和无序的反应。 |
|
| data | 数组/对象 | 择建在查询功能,使用数组。 |
|
| tags | 数组/函数 | 将Select2放入“标签’mode,用户可以添加新的选择和预先存在的标签是通过提供 这个选项的属性是一个 数组 或者一个 函数 返回一个 数组的 对象 或 字符串 。 如果 字符串 而不是使用 对象 他们将有一个被转换成一个对象 id 和 文本 属性相等 的值 字符串 。 |
|
| containerCss | 函数/对象 | 内联css将被添加到select2的容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。 |
|
| containerCssClass | 函数/字符串 | Css类将被添加到select2容器的标签。 |
|
| dropdownCss | 函数/对象 | 内联css将被添加到select2下拉的容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。 |
|
| dropdownCssClass | 函数/字符串 | Css类将被添加到select2下拉的容器。 |
|
| dropdownAutoWidth | 布尔 | 当设置为 真正的 尝试自动尺寸下拉基于内容的宽度。 |
|
| adaptContainerCssClass | 函数 | 过滤器/重命名的css类,因为他们被复制从源标签select2容器标签 |
|
| adaptDropdownCssClass | 函数 | 滤器/重命名的css类,因为他们被复制从源标签select2拉标签 |
|
| escapeMarkup | 函数 | 函数用于后处理标记从格式化程序返回功能。 默认情况下这个功能转义的html实体,以防止javascript注入。 |
|
| selectOnBlur | 布尔 | 设置为 真正的 如果你想要Select2选择当前高亮选项时模糊。 |
|
| loadMorePadding | 整数 | 定义了多少像素需要加载下一页前折以下。 默认值是 0 这意味着结果列表需要滚动到下一个页面的底部加载的结果。 这个选项可以用来触发加载更快,可能导致更流畅的用户体验。 |
|
| nextSearchTerm | 函数 | 函数用于确定下一个搜索词应该是什么 |
Example Code（针对目标元素为 div 例如：<div id="e1">...</div> ）
$("#e1").select2();
$("#e1").click(function () { alert("Selected value is: "+$("#e1").select2("val"));}); // 获取选中的ID值
$("#e1").click(function () { $("#e2").select2("val", "CA"); }); // id="CA" 选中（好像单个还不行，以数组形式才行）
$("#el").click(function() { $("#e2").select2("val", ""); }); // 不选中任何值
$("#e1").click(function () { var data = $("#e2").select2("data"); }); // 获取选中对象
$("#e1").click(function () { $("#e2").select2("data", {id: "CA", text: "California"}); });
$("#e1").click(function () { $("#e2").select2("open"); }); // 打开下拉框
$("#e1").click(function () { $("#e2").select2("close"); }); // 关闭下拉框
$("#e1").select2({placeholder: "Select a state"}); // 下拉框 提示
$("#e1").click(function () { alert("Selected value is: "+$("#e2").select2("val"));}); // 获取选中的ID值
$("#e1").click(function () { $("#e8_2").select2("val", ["CA","MA"]); }); // id="CA"，id="MA" 选中
$("#e12").click(function () { alert("Selected value is: "+JSON.stringify($("#e2").select2("data")));});// 获取选中JSON对象
$("#e1").click(function () { $("#e2").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]); });
// 加载数据
$("#e11").select2({
placeholder: "Select report type",
allowClear: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
// 加载数组 支持多选
$("#e11_2").select2({
createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} },
multiple: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
function log(e) {
var e=$("<li>"+e+"</li>");
$("#events_11").append(e);
e.animate({opacity:1}, 10000, 'linear', function() { e.animate({opacity:0}, 2000, 'linear', function() {e.remove(); }); });
}
// 对元素 进行事件注册
$("#e11")
.on("change", function(e) { log("change "+JSON.stringify({val:e.val, added:e.added, removed:e.removed})); })// 改变事件
.on("select2-opening", function() { log("opening"); }) // select2 打开中事件
.on("select2-open", function() { log("open"); }) // select2 打开事件
.on("select2-close", function() { log("close"); }) // select2 关闭事件
.on("select2-highlight", function(e) { log ("highlighted val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 高亮
.on("select2-selecting", function(e) { log ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 选中事件
.on("select2-removing", function(e) { log ("removing val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 移除中事件
.on("select2-removed", function(e) { log ("removed val="+ e.val+" choice="+ JSON.stringify(e.choice));}) //移除完毕事件
.on("select2-loaded", function(e) { log ("loaded (data property omitted for brevity)");}) //加载中事件
.on("select2-focus", function(e) { log ("focus");}) //获得焦点事件
.on("select2-blur", function(e) { log ("blur");}); //失去焦点事件
$("#e11").click(function() { $("#e11").val(["AK","CO"]).trigger("change"); });
扫一扫
2946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
