Using select2 when searching list match from start of string only

JavaScript
1

Hi, I’m using select2 and want to search list from start of string only.
This is a Wordpress site url: https://florapal.org/a-test-home-page/
this is my js:

jQuery(document).ready(function($) {
  $(".js-select2").select2(
    {
   placeholder: "Start typing, or scroll to name",
   allowClear: true,   
   matcher: function(term, text) {
     return text.toUpperCase().indexof(term.toUpperCase())==0;
   }
    });
});

I’m getting “Uncaught TypeError: text.toUpperCase is not a function”
and I only receive “Searching…” below input box - no results.
Any help much appreciated

2

I’m not familiar with select2, but a quick look at the documentation indicates that the two arguments passed into matcher are objects.

e.g.

matcher: function(params, data) {
  // term and text are object properties
  const term = params.term
  const text = data.text

  return text.toUpperCase().indexof(term.toUpperCase())==0;
}

or with destructuring

matcher: function({term, text}) {
  return text.toUpperCase().indexof(term.toUpperCase())==0;
}
3

Thanks for this, Tried your suggestion but still getting error:

Uncaught TypeError: Cannot read properties of undefined (reading ‘toUpperCase’)

4

I have to go out now, but if you look at the docs sample code they have a condition to check for that.

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

As I say I am not familiar with the workings of select2, so would have to do a bit more digging.

5

Thanks for your help, my javascript skills are none-existent, so just copy-pasting, so far from the documentation (Custom Search) I have this:

jQuery(document).ready(function($) {
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-select2").select2({
  matcher: matchCustom
});
});

Which matches the input to anywhere in the string. How can I change that to search only from start of string, I also need to ignore case.

Thanks for your help

6

Hi After more googling found this .
He suggested changing this line:

if (data.text.indexOf(params.term) > -1)

to:

if (data.text.toLowerCase().indexOf(params.term.toLowerCase()) === 0) {

Now I have it working as I want on desktop and mobile

2 Likes
7

Sorry for the late reply @rambleon,

Just for your info strings do have a startsWith method.

const text = data.text.toLowerCase()
const term = params.term.toLowerCase()

if (text.startsWith(term)) {...