使用select2显示与optgroup匹配的结果

Liv*_*one 8 optgroup jquery-select2

我正在使用带有Bootstrap 3的select2.现在我想知道如果搜索匹配optgroup名称是否可以显示所有optgroup项目,同时仍然能够搜索项目.如果可以,我该怎么办?

Liv*_*one 21

实际上通过修改匹配器选择了解决方案

 $("#myselect").select2({
    matcher: function(term, text, opt){
         return text.toUpperCase().indexOf(term.toUpperCase())>=0 || opt.parent("optgroup").attr("label").toUpperCase().indexOf(term.toUpperCase())>=0
    }
});
Run Code Online (Sandbox Code Playgroud)

在每个optgroup中设置label属性的前提下.

  • Select2 V4 将不同的参数传递给匹配器函数。(参见@willbradley的回答)也许这可以帮助你 (2认同)

wil*_*ley 20

上面的答案似乎没有开箱即用的Select2 4.0,所以如果你正在寻找它,请检查出来:https://github.com/select2/select2/issues/3034

(使用这样的功能:$("#example").select2({matcher: modelMatcher});)

function modelMatcher (params, 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;
}
Run Code Online (Sandbox Code Playgroud)

  • 这有效。这现在应该是答案,因为上面确实有问题。谢谢威尔布拉德利。 (2认同)