jquery-select2 - 在 select2 建议列表中突出显示键入的字符未显示

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