4

私は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 タグが含まれているため) が、説明内の実際の「より小さい」記号は強調表示されません。 、実際には "& lt;" に変換されているためです。

select2 で html タグ内を検索しないようにするにはどうすればよいですか?

4

1 に答える 1

3

わかりました、解決策は実際には非常に単純だったようです: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;
     }
  });

そのため、ユーザーが「strong」を検索すると、関連する結果のみが得られます。

しかし今、別の問題があります：

ここで、ユーザーが「<」を検索すると、select2 は強力なタグ内の「<」を強調表示します。

検索結果のハイライターにも何らかの形で「パッチ」を適用する必要があるようです...

編集： これに戻って、強調表示の解決策はそれほど簡単ではないようです...

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)));
    }

どういうわけか、これら 2 つの関数を置き換える必要がありますが、書式設定された HTML (強調表示する検索語)の文字の範囲からソース htmlにマッピングするための簡単な解決策を見つけることができません(< span クラスを追加できるようにするため)。 ='select2-match' > ) ...

より良い解決策がある場合は、お気軽に共有してください...

于 2013-09-13T14:29:16.463 に答える