Custom match jquery select2

Question

I have this sample jquery select2:

$('#example').select2({
  escapeMarkup: function (markup) {
    return markup;
  },
/*   templateResult: formatResult,
  templateSelection: formatResult, */
  tags: true,
  createTag: function (params) {
    // Don't offset to create a tag if there is no @ symbol
    if (params.term.match(/[a-z]/i)) {
      // Return null to disable tag creation
      return {
        id: params.term,
        text: params.term +' Click to add as new category',
        tag: true
      }
    }
    return null;
  },
  matcher: matchCustom,
  sorter: function(results) {
    for (var x in results) results[x].text.includes('Click to add as new category') ? results.push(results.splice(x, 1)[0]) : 0;
    return results;
  },
});

function formatResult(state)
{

  if (state.text === '-- Select --') {
    return ''+state.text+'';
  }
  if (!state.id || !state.element) {
    // console.log(state);
    return state.text;
  }

  if(state.element.dataset.global === '1'){
    return ''+state.text+'Standard';
  }else{
    return ''+state.text+'';
  }
}

function matchCustom(params, data) {
    // console.log("params",params);
    // console.log("data",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.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
        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;
    }else{
        let splittedText = splitTermText(data.text);
        splittedText.forEach(function(v,i){
        console.log(v);
        //checking if any of splitted value starts from searched term
        //ignoring first words because it must be started from other
        //words else it would have returned from above 
            if(i != 0){
              if (v.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
                var modifiedData = $.extend({}, data, true);
                return modifiedData;
              }
            }
        });
    }

    // Return `null` if the term should not be displayed
    return null;
}

function splitTermText(term)
{
var separators = [' ', '-', '\$', '\$', '/', ':'];
let splitted = term.split(new RegExp(separators.join('|'), 'g'));
return splitted.filter(v => v !== "")
}

Here, I am trying to create a custom match function for my matcher. For example: if I enter E on the input field, I want Elephant, View/Exposure and View / Exposure on the list. I want to perform not only on the search but on the cases like , -, :, /, (, ) so if there is a word like dummy:elephant on that case, while entering e I want this dummy:elephant on the list too.

jsfiddle

Frenchy · Accepted Answer

I have just simplified your program and it seems ok with what you want. I am using RegExp and match

$('#example').select2({
  escapeMarkup: function (markup) {
    return markup;
  },
/*   templateResult: formatResult,
  templateSelection: formatResult, */
  tags: true,
  createTag: function (params) {
    // Don't offset to create a tag if there is no @ symbol
    if (params.term.match(/[a-z]/i)) {
      // Return null to disable tag creation
      return {
        id: params.term,
        text: params.term +' Click to add as new category',
        tag: true
      }
    }
    return null;
  },
  matcher: matchCustom,
  sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
});


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
    var sregex = `(^${params.term}|[ :\-\/]${params.term})`;

    //var regex = new RegExp(sregex);// case sensitive
    var regex = new RegExp(sregex, 'i'); // nocase
    if(data.text.match(regex)){
       var modifiedData = $.extend({}, data, true);
      return modifiedData;    
    }

    // Return `null` if the term should not be displayed
    return null;
}

Custom match jquery select2

Answers (1)

Related Questions