Использование SELECT2 4.0.0 с бесконечными данными и фильтром

Я настоятельно рекомендую прочитать примечания к выпуску и объявление о выпуске 4.0 при переходе с Select2 3.5.2 на Select2 4.0.0.

В версии 3.5.2 я могу воспроизвести совпадение подчеркивания при поиске данных (используя formatSelection и query.term).. любая идея, как это сделать с v4.0.0 (функция templateResult передает только «результат», а не «запрос» больше ?

Это было удалено в 4.0, потому что результаты были отделены от запросов, поэтому не было смысла продолжать передавать информацию. Конечно, это не означает, что вы не можете получить запрос и сохранить его. Все, что вам нужно сделать, это сохранить запрос, что-то вроде следующего может работать

var query = {};
var $element = $('#my-happy-select');

function markMatch (text, term) {
  // Find where the match is
  var match = text.toUpperCase().indexOf(term.toUpperCase());

  var $result = $('<span></span>');

  // If there is no match, move on
  if (match < 0) {
    return $result.text(text);
  }

  // Put in whatever text is before the match
  $result.text(text.substring(0, match));

  // Mark the match
  var $match = $('<span class="select2-rendered__match"></span>');
  $match.text(text.substring(match, match + term.length));

  // Append the matching text
  $result.append($match);

  // Put in whatever is after the match
  $result.append(text.substring(match + term.length));

  return $result;
}

$element.select2({
  templateResult: function (item) {
    // No need to template the searching text
    if (item.loading) {
      return item.text;
    }

    var term = query.term || '';
    var $result = markMatch(item.text, term);

    return $result;
  },
  language: {
    searching: function (params) {
      // Intercept the query as it is happening
      query = params;

      // Change this to be appropriate for your application
      return 'Searching…';
    }
  }
});

В версии 3.x вы можете добавлять бесплатные записи, используя поисковое значение, отсутствующее в списке (используя createSearchChoice). В версии 4.0 такой опции нет, есть идеи, как сделать это снова?

Это все еще можно сделать в версии 4.0, используя параметр tags (установите для него значение true). Если вы хотите настроить тег, вы можете использовать createTag (аналогично createSearchChoice).

var $element = $('#my-happy-select');

$element.select2({
  createTag: function (query) {
    return {
      id: query.term,
      text: query.term,
      tag: true
    }
  },
  tags: true
});

Простой способ подчеркнуть совпадающие результаты с помощью select2 4.x

$element.select2({

    escapeMarkup: function (markup) { return markup; }
    ,
     templateResult: function (result) {
        return result.htmlmatch ? result.htmlmatch : result.text;
     }
    ,
    matcher:function(params, data) {
        if ($.trim(params.term) === '') {
          return data;
        }
        if (typeof data.text === 'undefined') {
          return null;
        }

        var idx = data.text.toLowerCase().indexOf(params.term.toLowerCase());
        if (idx > -1) {
          var modifiedData = $.extend({
              'htmlmatch': data.text.replace(new RegExp( "(" + params.term + ")","gi") ,"<u>$1</u>")
          }, data, true);

          return modifiedData;
        }

        return null;
    }
})