结果后添加更多视图 Select2答案

【问题标题】：Add view more after results Select2结果后添加更多视图 Select2
【发布时间】：2017-04-11 22:57:09
【问题描述】：

我使用 Select2 的最新版本。我想在结果后添加一个“查看更多”链接。 This solution 不起作用。

$("#select-search").select2({
    ajax: {
        url: "url",
        dataType: 'json',
        delay: 250,
        type: 'POST',

        data: function (params) {
            return {
                q: params.term
            };
        },

        processResults: function (data) {
            return {
                results: $.map(data.names, function(obj) {
                    return {id: obj.text, text: obj.text};
                })
            };
        }
    },

    escapeMarkup: function (markup) { return markup; }
});

【问题讨论】：

标签： javascript jquery-select2-4

【解决方案1】：

解决方案是为旧版本的select2编写的，部分api已更改，$("#select").on('open', fn)将不起作用，您必须使用$("#select").on('select2:open', fn)。

这是工作示例，请注意它基于jQuery Select2 plugin "view more...", hidden search text field questions 中提供的解决方案

function format(state) {
    // if (!state.id) return state.text; // optgroup
    return state.text;// + " <i class='info'>link</i>";
}

$("#select").select2({
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
});

$("#select").on('select2:open', function() { 
    $(".select2-results").append('<li class="select2-results-dept-0 select2-result select2-result-unselectable select2-result-with-children"><div class="select2-result-label view-more">View More</div></li>');
    $(".view-more").on("click", function() { alert('Go to search page'); }); 
    $('.select2-results .select2-highlighted').removeClass('select2-highlighted');

});

var searchValue = '';
$('.select2-search input').on('keydown', function(e) { 
    searchValue = $(this).val();
    console.log(searchValue);
});

$("#myBtn").on("click", function() { 
    alert(searchValue);
});

$("#select").on("keydown", function(e) {
    console.log('keydown');
});

body {
    font-family: sans-serif;
}

ul {
    padding: 0;
}

.info {
    color: #00f;
    font-weight: bold;
    font-size: 10px;
    float: right;
}

.info:hover {
    text-decoration: underline;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Select2</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">	
</head>
<body>
<p>
    <select style="width:300px" id="select">
               <optgroup label="Alaskan/Hawaiian Time Zone">
                   <option value="AK">Alaska</option>
                   <option value="HI">Hawaii</option>
               </optgroup>
               <optgroup label="Pacific Time Zone">
                   <option value="CA">California</option>
                   <option value="NV">Nevada</option>
                   <option value="OR">Oregon</option>
                   <option value="WA">Washington</option>
               </optgroup>
               <optgroup label="Mountain Time Zone">
                   <option value="AZ">Arizona</option>
                   <option value="CO">Colorado</option>
                   <option value="ID">Idaho</option>
                   <option value="MT">Montana</option><option value="NE">Nebraska</option>
                   <option value="NM">New Mexico</option>
                   <option value="ND">North Dakota</option>
                   <option value="UT">Utah</option>
                   <option value="WY">Wyoming</option>
               </optgroup>
               <optgroup label="Central Time Zone">
                   <option value="AL">Alabama</option>
                   <option value="AR">Arkansas</option>
                   <option value="IL">Illinois</option>
                   <option value="IA">Iowa</option>
                   <option value="KS">Kansas</option>
                   <option value="KY">Kentucky</option>
                   <option value="LA">Louisiana</option>
                   <option value="MN">Minnesota</option>
                   <option value="MS">Mississippi</option>
                   <option value="MO">Missouri</option>
                   <option value="OK">Oklahoma</option>
                   <option value="SD">South Dakota</option>
                   <option value="TX">Texas</option>
                   <option value="TN">Tennessee</option>
                   <option value="WI">Wisconsin</option>
               </optgroup>
               <optgroup label="Eastern Time Zone">
                   <option value="CT">Connecticut</option>
                   <option value="DE">Delaware</option>
                   <option value="FL">Florida</option>
                   <option value="GA">Georgia</option>
                   <option value="IN">Indiana</option>
                   <option value="ME">Maine</option>
                   <option value="MD">Maryland</option>
                   <option value="MA">Massachusetts</option>
                   <option value="MI">Michigan</option>
                   <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
                   <option value="NY">New York</option>
                   <option value="NC">North Carolina</option>
                   <option value="OH">Ohio</option>
                   <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
                   <option value="VT">Vermont</option><option value="VA">Virginia</option>
                   <option value="WV">West Virginia</option>
               </optgroup>
              </select>
 </p>
<p id="log"></p>
<a href="#" id="myBtn">Get value</a>	
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js'></script>	
</body>
</html>

这是上面代码http://jsfiddle.net/azs06/EW8t7/127/的Jsfiddle

【讨论】：