如何在select2下拉列表中隱藏選項上的一些文本？

Question

我在 select2 下拉列表中有一個這樣的產品列表。

<option>Product A [Barcode]</option>
<option>Product A [Barcode]</option>
<option>Product A [Barcode]</option>
<option>Product A [Barcode]</option>

現在我想從選項中隱藏條形碼，但希望在輸入條形碼時搜索找到產品。 我試過

<option>Product A <span style='display:none;'>[Barcode]</span></option>

但沒有成功。 無法在文檔中找到答案。 請幫忙。

Answer 1

選項元素內部不能有任何子元素，因此您可以在選項的“值”屬性中移動條形碼值。然后定義 select2 匹配器函數來搜索選項值。

https://select2.org/searching

$('#mySelect').select2({
  matcher: function(params, data) {
    // If there are no search terms, return all of the data
    if ($.trim(params.term) === '') { return data; }
    // Do not display the item if there is no 'text' property
    if (typeof data.text === 'undefined') { return null; }

    // check for both value and text
    var searchTarget = params.term.toLowerCase();
    if (data.text.toLowerCase().indexOf(searchTarget) > -1 || data.id.toLowerCase().indexOf(searchTarget) > -1) {
        return $.extend({}, data, true);
    }
    //
    return null;
}
});

結果是這樣的：

https://jsfiddle.net/scarabs/canrx12k/