Question

我正在尝试从select2版本2迁移到版本4.建议列表中的键入字符突出显示在旧版本中正确发生;但现在它没有发生。这是我用来突出显示的代码：

.select2-result-selectable .select2-match, .select2-result-unselectable     .select2-match
{
text-decoration: none;
font-weight: bold;
}

Answer 1

在版本4+中，您需要处理templateResult。基本上，您需要获取术语并将结果替换为您自己的模板。

我为你制作了一个样本，用粗体表示将结果替换为另一个样本。但是，您可以根据需要自定义结果（使用颜色等）。 PS：使用jquery获取该术语，但如果需要，可以将其替换为javascript。

使用Javascript：

$(document).ready(function() {
  $('.selectStates').select2({
    templateResult: formatSingleResult
  });
});

function formatSingleResult(result) {
    var term =$(".selectStates").data("select2").dropdown.$search.val();
    var reg = new RegExp(term, 'gi');
    var optionText = result.text;
    var boldTermText = optionText.replace(reg, function(optionText) {return `<b>${optionText}</b>`});
    var $item = $(`<span> ${boldTermText}  </span>`);
    return $item;
}

HTML：

<select class="selectStates">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
    <option value="AZ">Arizona</option>
</select>

以下是工作示例：https://codepen.io/cassioseffrin/pen/pLYyVv

Answer 2

您还可以将代码放置到processResults函数中

$('.selectStates').select2({
    // ...
    processResults: function (data, params) {
                return {
                    results: $.map(data.items, function(obj) {
                        var term = params.term;
                        var reg = new RegExp(term, 'gi');
                        var optionText = obj.text;
                        var boldTermText = optionText.replace(reg, function(optionText) { return "<b>" + optionText + "</b>" });
                        var text = "<span>" + boldTermText + "</span>";

                        return { id: obj.id, text: text };
                    })
                };
            },
     escapeMarkup: function (m) { return m; },
     //...
});

在select2建议列表中，未显示键入字符的高位

2 个答案: