jquerysearchjquery-select2

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


Solution

  • 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>