CODEWITHSUNDEEP
jquerysearchjquery-select2
Santhucool
Santhucool

Reputation: 1726

Select2 dropdown on search checking any character occurance, need to change to only check by first character

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

Upvotes: 3

Views: 4364

Answers (1)

IlGala
IlGala

Reputation: 3419

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>

Upvotes: 2

Related Questions