Select2 matcher

Матчит себя, родителя и детей

by shrpne

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<select>
<optgroup label="Russia">
    <option value="1">Moscow</option>
    <option value="2">Novosibirsk</option>
    <option value="0">Other</option>
</optgroup>
<optgroup label="United states">
    <option value="1">new york</option>
    <option value="2">Washington</option>
    <option value="0">Other</option>
</optgroup>
    
</select>

CSS

select {width: 200px}

JavaScript

// Пример матчера, который матчит себя, родителя и детей

$('select').select2({
    matcher: modelMatcher
});

function modelMatcher (params, data) {
	console.log(params)
	console.log(data)
    data.parentText = data.parentText || "";

    // Always return the object if there is nothing to compare
    if ($.trim(params.term) === '') {
      return data;
    }

    // Do a recursive check for options with children
    if (data.children && data.children.length > 0) {
      // Clone the data object if there are children
      // This is required as we modify the object to remove any non-matches
      var match = $.extend(true, {}, data);

      // Check each child of the option
      for (var c = data.children.length - 1; c >= 0; c--) {
        var child = data.children[c];
        child.parentText = data.parentText + " " + data.text;

        var matches = modelMatcher(params, child);

        // If there wasn't a match, remove the object in the array
        if (matches == null) {
          match.children.splice(c, 1);
        }
      }

      // If any children matched, return the new object
      if (match.children.length > 0) {
        return match;
      }

      // If there were no matching children, check just the plain object
      return modelMatcher(params, match);
    }

    // If the typed-in term matches the text of this term, or the text from any
    // parent term, then it's a match.
    var original = (data.parentText + ' ' + data.text).toUpperCase();
    var term = params.term.toUpperCase();


    // Check if the text contains the term
    if (original.indexOf(term) > -1) {
      return data;
    }

    // If it doesn't contain the term, don't return anything
    return null;
  }