Select2 在格式化选项的 html 内搜索答案

【问题标题】：Select2 searches inside the html of the formatted optionsSelect2 在格式化选项的 html 内搜索
【发布时间】：2013-09-13 14:14:40
【问题描述】：

我使用的是select2 widget，我需要将搜索结果显示为html格式。

所以我是这样使用它的：

  function formatMyItem(myItem) {
     return defaultEscapeMarkup(myItem.someDescription) + " <strong>(" + myItem.someOtherValue + ")</strong>";
  }

  function defaultEscapeMarkup(markup) {
     var replace_map = {
        '\\': '&#92;',
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;',
        "/": '&#47;'
     };

     return String(markup).replace(/[&<>"'\/\\]/g, function (match) {
        return replace_map[match];
     });
  }

  var suggestionValues = [];
  for (var i = 0; i < myData.length; i++) {
     var myItem = myData[i];
     suggestionValues.push({
        id: myItem.someKey,
        text: formatMyItem(myItem)
     });
  }

  $mySelect.select2({
     width: 'resolve',
     multiple: true,
     data: suggestionValues,
     escapeMarkup: function(m) {
        // Do not escape HTML in the select options text
        return m;
     }
  });

但是现在当用户搜索某些内容时，该词会在选项的 HTML 中搜索。

例如，如果用户搜索“strong”（假设某些描述可以包含“strong”一词），那么 select2 将建议所有值（因为它们都包含“strong”）。

另外，当用户搜索“

如何让 select2 不在 html 标签内搜索？

【问题讨论】：

标签： jquery-select2 html-escape-characters

【解决方案1】：

好的，看来解决方案实际上很简单：D

我添加了以下内容：

  $mySelect.select2({
     width: 'resolve',
     multiple: true,
     data: suggestionValues,
     escapeMarkup: function(m) {
        // Do not escape HTML in the select options text
        return m;
     },
     matcher: function(term, text) {
        // Search the term in the formatted text
        return $("<div/>").html(text).text().toUpperCase().indexOf(term.toUpperCase())>=0;
     }
  });

所以现在当用户搜索“强”时，他们只会得到相关的结果。

但是现在还有一个问题：

现在，如果用户搜索“

看来我还需要以某种方式“修补”搜索结果荧光笔...

编辑：回到这一点，似乎突出显示的解决方案并不那么容易......

select2中的默认实现是这样的：

    formatResult: function(result, container, query, escapeMarkup) {
        var markup=[];
        markMatch(result.text, query.term, markup, escapeMarkup);
        return markup.join("");
    },
    .......

    function markMatch(text, term, markup, escapeMarkup) {
        var match=text.toUpperCase().indexOf(term.toUpperCase()),
            tl=term.length;

        if (match<0) {
            markup.push(escapeMarkup(text));
            return;
        }

        markup.push(escapeMarkup(text.substring(0, match)));
        markup.push("<span class='select2-match'>");
        markup.push(escapeMarkup(text.substring(match, match + tl)));
        markup.push("</span>");
        markup.push(escapeMarkup(text.substring(match + tl, text.length)));
    }

不知何故，我需要替换这两个函数，但我找不到从 格式化 HTML 中的字符范围（要突出显示的搜索词）映射回的简单解决方案源 html （以便我可以添加）...

如果你们有更好的解决方案，请随时分享...

【讨论】：