您的位置: 首页  >  文章  >  Select2.js学习总结

Select2.js学习总结

分类: 文章 • 2024-10-25 20:42:22

本文主要是对Select2插件常用使用方法的一些总结。包括其单选、多选、按照拼音搜索功能。并通过测试示例对其效果进行了验证。

一、效果图

Select2.js学习总结 
Select2.js学习总结 
Select2.js学习总结

二、 使用方式

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>
  • 1
  • 2
  • 3

2.如果在使用select2单选搜索时想要能够按照拼音字母进行搜索，需要引入pinyin.js插件，并对select2.js源码进行修改。

<script src="../../plugins/pinyin/pinyin.js"></script>
  • 1

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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

并在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);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

三、常用功能说明

1.常用参数设置含义

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: ",",                         // 分隔符
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

2.select2事件：

//置空  
$eventSelect.val(null).trigger("change");  
//选中  
$eventSelect.on("selected", function (e) { })  
//移除  
$eventSelect.on("removed", function () { })  
//多个事件  
$eventSelect.on("close removed", function () { })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

3.获取value和text

$("#xa").val();  
$("#xa").select2("val");  
$("#xa").select2('data').text ;
  • 1
  • 2
  • 3

四、测试源码示例

1.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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

2.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);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64

3.运行结果： 
Select2.js学习总结

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"); });

相关推荐