在结果后添加查看更多信息Select2

我使用的是Select2的的。结果后，我想添加一个“查看更多”链接。 This solution不起作用。在结果后添加查看更多信息Select2

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

来源

2017-04-11 Bacchus

该解决方案针对的是旧版本的选择2写的，一些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"> \t 
 
</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> \t 
 
<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> \t 
 
</body> 
 
</html>

这里提供的解决方案是上面的代码的的jsfiddle http://jsfiddle.net/azs06/EW8t7/127/

来源

2017-04-11 14:57:09 azs06

在结果后添加查看更多信息Select2

回答

相关问题