How do I get the matcher to work

I am tring to change how the search works, so that it searchs the first letters of the items. I am trying to use the matcher configuration as specified in the documentation, but just get no results found…can anyone see where I am going wrong?..thanks

<script type="text/javascript">

function matchStart(params, data) {
// If there are no search terms, return all of the data
if ($.trim(params.term) === ‘’) {
return data;
}

        // Skip if there is no 'children' property
        if (typeof data.children === 'undefined') {
            return null;
        }

        // `data.children` contains the actual options that we are matching against
        var filteredChildren = [];
        $.each(data.children, function (idx, child) {
            if (child.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
                filteredChildren.push(child);
            }
        });

        // If we matched any of the timezone group's children, then set the matched children on the group
        // and return the group object
        if (filteredChildren.length) {
            var modifiedData = $.extend({}, data, true);
            modifiedData.children = filteredChildren;

            // 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;
    }



    $(function () {
       $("#mySelect").select2({
           matcher: matchStart    
       });
    });



</script>


    <select id="mySelect" name="mySelect">
        <option value="0">Select</option>
        <option value="1">Angelface</option>
        <option value="2">Batcrazy</option>
        <option value="3">Running Man</option>
        <option value="4">The Scorpion King</option>
        <option value="5">Cold Heart</option>
    </select>

The code you copied above assumes your data is exclusively <optgroup>s with child elements. If that’s not the case with your data set, then the code above will not work. The following if block is most likely suppressing all of your results because (I’m assuming) your items don’t have children:

// Skip if there is no 'children' property
if (typeof data.children === 'undefined') {
    return null;
}

This example from the Select2 documentation is probably more like what you need.

Hello, and thanks for your reply. I tried the other example code, but it still filters by looking at the entire word instead of the beginning. It also only filters, if the user is typing in uppercase, can that be changed, so it can be either upper or lower case? I used the code below, do you know how to amend so that results start from the beginning of the word…please?

function matchCustom(params, data) {
// If there are no search terms, return all of the data
if ($.trim(params.term) === ‘’) {
return data;
}

// Do not display the item if there is no 'text' property
if (typeof data.text === 'undefined') {
  return null;
}

// `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.indexOf(params.term) > -1) {
  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;

}

$(".js-example-matcher").select2({
matcher: matchCustom
});

Hi, Paul–

I guess you’re new to JavaScript (or to programming in general), because your questions are very basic. To match strictly at the beginning of a string, you need to test whether the input term (params.term) appears at index 0 (i.e., starting at the first character) of the data.text value. So just change > -1 to === 0 in the indexOf() test in the example code. (Here’s the documentation on the indexOf() method: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf).

To match regardless of letter case, convert the input text (params.term) and the value being tested (data.text) to either upper or lowercase: if (data.text.toLowerCase().indexOf(params.term.toLowerCase()) === 0) {

I recommend you take some JavaScript training courses if you’re not very familiar with the language and its capabilities. Being a good developer is all about understanding the capabilities of the language you’re programming in. You don’t have to memorize everything (that’s what Google is for :slight_smile:) but you should be generally familiar with the most common features of the language.

I hope this doesn’t sound harsh, but the issues you asked about here are, frankly, very basic, and you will encounter much more difficult issues if you project has any level of complexity at all. I don’t know whether you have any formal training in programming—and you don’t have to (I’m completely self-taught and I’ve been programming for almost 40 years—over 30 years professionally). There are lots of online resources (YouTube videos, StackOverflow, etc.) that can help you learn how to program effectively, regardless of which programming language you use. A really good place to start is w3schools. It has a really good JavaScript tutorial that will take you through the major features and capabilites of the language.

Good luck with your project.

Thanks John, yes I am new to Javascript, and have alot to learn, this is my first project though. I plan to take some courses in the near future.

1 Like

Hi John, had the same problem, and your solution solved it, much appreciated.
My Javascrpt skills are none-existent, so basically just copy/pasting. I’m also self-taught and working as a professional programmer for 50 years.
I’m going to take your advice and start on the w3schools Javascript tutorial.
Thanks