需求: 实现一个可过滤的下拉框
过滤规则: 1, 可输入完整搜索文本直接过滤; 2, 可输入搜索文本首字母进行过滤; 3, 可点击拼音过滤
代码如下 (head 中 select2 的 CSS 和 js 文件可以替换为网络引用地址):
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>select2-2</title>
- <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
- <link rel="stylesheet" type="text/css" media="all" href="css/select2.css" />
- <script type="text/javascript" src="js/select2.min.js"></script>
- <style>
- body{font-size: 12px;padding: 50px;}
- .click-content{
- padding: 3px 2px;
- margin: 0;
- width: 100%;
- border-bottom: 1px solid #ccc;
- }
- .letter-item{
- display: inline-block;
- margin: 2px;
- width: 16px;
- height: 16px;
- line-height: 16px;
- text-align: center;
- background-color: #5bbaff;
- color: #fff;
- border-radius: 50%;
- cursor: pointer;
- }
- .select2-results li.select2-result-with-children> .select2-result-label{
- background-color: #5bbaff;
- }
- </style>
- </head>
- <body>
- <div class="div">
- <select class="click-select" name="test" id="test">
- <optgroup label="A">
- <option value="1"> 阿格尔 | a</option>
- <option value="2"> 敖恩查 | a</option>
- <option value="3"> 奥尼尔 | a</option>
- <option value="4"> 安康 | a</option>
- <option value="5"> 艾丽丝 | a</option>
- </optgroup>
- <optgroup label="B">
- <option value="6"> 贝钱 | b</option>
- <option value="7"> 巴斯特 | b</option>
- <option value="8"> 贝尔尔登 | b</option>
- <option value="9"> 鲍勃 | b</option>
- </optgroup>
- <optgroup label="C">
- <option value="10"> 陈龙 | c</option>
- <option value="11"> 迟帅 | c</option>
- <option value="12"> 常石磊 | c</option>
- <option value="13"> 程琳 | c</option>
- <option value="14"> 陈浩明 | c</option>
- <option value="15"> 陈伟霆 | c</option>
- <option value="16"> 陈建斌 | c</option>
- </optgroup>
- <optgroup label="D">
- <option value="17"> 戴维斯 | d</option>
- <option value="18"> 邓肯 | d</option>
- <option value="19"> 迪克 | d</option>
- <option value="20"> 丹尼尔 | d</option>
- <option value="21"> 迪安 | d</option>
- <option value="22"> 杜克 | d</option>
- <option value="23"> 多尔顿 | d</option>
- </optgroup>
- </select>
- </div>
- <script>
- $(function(){
- let letterItems = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
- let clickCon = $('<div class="click-content"></div>');
- letterItems.map(item => {
- clickCon.append('<div data-check-letter=' + item + 'class="letter-item">' + item + '</div>');
- });
- $('#test').select2({
- width:150,
- allowClear: true,
- formatResult: function (item) {
- var str = item.text;
- var idx = str.indexOf('|');
- if(str.indexOf('|') === -1){
- return item.text;
- }else{
- return str.substring(0,idx);
- }
- },
- formatSelection: function (item) {
- var str = item.text;
- var idx = str.indexOf('|');
- if(str.indexOf('|') === -1){
- return item.text;
- }else{
- return str.substring(0,idx);
- }
- },
- placeholder: "Select a State",
- dropdownCssClass: "click-select"
- });
- $('#test').on('select2-open',function(){
- $(clickCon).insertBefore('.click-select .select2-results');
- $('.letter-item').on('click',function(e){
- let clickLetter = $(this).attr('data-check-letter');
- $("#test").select2("search",clickLetter);
- });
- });
- });
- </script>
- </body>
- <html>
来源: http://www.qdfuns.com/article/50224/b7f03f7ea28b029449c09614fc5864bd.html