I have a select2 dropdown as below:
I need to change the search method of that:
I have the following values in dropdown:
<option value="1">Apple</option>
<option value="2">Orange 2</option>
<option value="3">Banana</option>
<option value="4">Mango</option>
<option value="5">Pomegranate</option>
When I search Mango it is showing Mango and Pomegranate because both contains letter M.
I need only search by first character, like when I search with letter M, it should only give Mango it should not check characters in between!!
Check my fiddle : FIDDLE
You can create a Custom matcher.
As written in the documentation:
Custom matcher uses a compatibility module that is only bundled in the full version of Select2. You also have the option of using a more complex matcher.
EDIT
Here you find a fiddle implementing the code you need. This is the official documentation reference
$(document).ready(function () {
// Single select example if using params obj or configuration seen above
var configParamsObj = {
placeholder: 'Select an option...', // Place holder text to place in the select
minimumResultsForSearch: 3, // Overrides default of 15 set above
matcher: function (params, data) {
// If there are no search terms, return all of the data
if ($.trim(params.term) === '') {
return data;
}
// `params.term` should be the term that is used for searching
// `data.text` is the text that is displayed for the data object
if (data.text.toLowerCase().startsWith(params.term.toLowerCase())) {
var modifiedData = $.extend({}, data, true);
modifiedData.text += ' (matched)';
// You can return modified objects from here
// This includes matching the `children` how you want in nested data sets
return modifiedData;
}
// Return `null` if the term should not be displayed
return null;
}
};
$("#singleSelectExample").select2(configParamsObj);
});.selectRow {
display : block;
padding : 20px;
}
.select2-container {
width: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<body>Single select example
<div class="selectRow">
<select id="singleSelectExample">
<option></option>
<option value="1">Apple</option>
<option value="2">Orange 2</option>
<option value="3">Banana</option>
<option value="4">Mango</option>
<option value="5">Pomegranate</option>
</select>
</div>
</body>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments