隱藏選項使用jQuery Select2搜索

Question

我正在使用Select2插件，而我無法爲我的生活弄清楚這一點。

基本上我正在做的是讓用戶從顏色列表中選擇5種顏色，並選擇「其他」選項。所以顯示10個左右的顏色，並在底部選擇「其他」。這些「其他」選項在選擇時綁定了顏色選擇器，以便用戶可以選擇其他顏色。

現在唯一能讓他們做到這一點的方法是創建5個選項，名稱都是「Other」，所以用戶可以根據自己的喜好選擇其他5個選項。我的問題是，當用戶開始在搜索框中輸入查詢時，我無法正確隱藏不是第一個顯示的「其他」選項。

我與正常的結果是開放這樣

$('.multi-select').select2('misc options').on("select2:open", function() { 
    $('.select2-results__option[aria-selected="false"]:contains("Other"):not(:eq(0))').hide(); 
    $('.select2-results__option[aria-selected="false"]:contains("Other"):eq(0)').show(); 
}); 

但是，這樣做的時候我同樣的功能結合到搜索輸入元素的這樣

$('.select2-search__field').on('keyup', function() { 
    $('.select2-results__option[aria-selected="false"]:contains("Other"):not(:eq(0))').css({ 
      'display': 'none', 
      'opacity': 0 
    }); 
    $('.select2-results__option[aria-selected="false"]:contains("Other"):eq(0)').css({ 
      'display': 'block', 
      'opacity': 1 
    }); 
}); 

我的變化如果Select2決定由於窗口空間限制而使結果出現在上面，那麼除了頂部的「其他」選項浮動在選擇對象上方的上方之外，其他元素都會浮動。

閃爍的原因可能是由於插件綁定了對象的'keydown'（和'keypress'）上的show事件，所以我對同一個觸發器的綁定被覆蓋，使我綁定到'keyup'這會導致盒子在按鍵和釋放之間顯示。

我不是修改插件來做到這一點，但我無法弄清楚我需要在插件裏面編輯這個工作。

---

雜項。我試過的東西包括設置一個css選擇器，以便每個包含「Other」的Select2對象創建第一個框，但是沒有像「：contains」這樣的css選擇器。

將一個類應用到<li></li> Select2創建指定它是否是「其他」選項，但這是由插件控制的，所以我無法控制該選項。

Answer 1

我想通了。由於這些字段的值被用作後端字段的ID，所以我可以在ID後添加「-other-color」，所以我有一種方法可以在CSS中選擇它，以便超越閃爍。

.select2-results__options li[id*="-other-color"][aria-selected="false"] ~ li[id*="-other-color"][aria-selected="false"]{ 
    display:none!important; 
} 

由於在列表不僅僅是其他顏色選項更多的孩子，你需要使用波浪選擇被選中基於屬性的選擇後，選擇一切。

Answer 2

而不是修改「其他」的結果，以實現您正在尋找的，我建議使用select2:select事件和maximumSelectionLength選項的組合。

因此，您將從包含默認顏色列表的標記開始，然後使用一個「其他」選項。

<select multiple="multiple"> 
    <option value="red">Red</option> 
    <option value="blue">Blue</option> 
    <option value="green">Green</option> 
    <option value="yellow">Yellow</option> 
    <option value="custom">Other</option> 
</select> 

請注意，我已經設置了value爲「其他」選項custom，你可以選擇任何你想，只要它不會與顏色衝突。這只是將用於確定何時顯示顏色選擇器的「標誌」選項。

爲了最終將選擇的數量限制爲只有五種顏色，可以使用maximumSelectionLength選項初始化Select2並將其設置爲5。這將告訴Select2只允許五個選擇，並且您可以找到一個示例in the documentation。

var $element = $("select").select2({ 
    maximumSelectionSize: 5 
}); 

所以，現在您的選擇數量有限，我們可以通過「其他」選項來實現顏色選擇器。我們可以通過監聽select2:select選項來檢測何時選擇了「其他」選項，該選項在選擇選項時被觸發。

$element.on("select2:select", function (evt) { 
    // handle the "Other" option 
}); 

從那裏，你需要明確地發現了「其他」選項，這樣我們就可以檢查通過select2:select事件的custom的id，這就是我們之前設置傳入的數據對象。由於您希望保持打開多個自定義顏色的選項，我們將在選中時立即取消選擇「其他」選項。

function (evt) { 
    // check for the custom id 
    if (evt.params.data.id === 'custom') { 
    // unselect the element, so other custom colors can be picked 
    evt.params.data.element.selected = false; 

    // update the selection 
    $(this).trigger('change'); 
    } 
} 

從那裏，你需要實現用戶可以選擇顏色的部分。出於這個目的，我只用了一個prompt要求顏色。因爲prompt是同步的，所以我們可以等待給出的選擇。但是您的顏色選擇器很可能是異步的，所以您可能必須將其餘的事件放在不同的事件處理程序中。

// prompt the user for a color somehow 
var color = prompt("Pick a color, any color"); 

一旦顏色已經選定，你將需要創建一個自定義<option selected>它。這樣值就會被髮送到服務器，所以Select2可以知道選擇了什麼顏色。

// create a new option 
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option 
var option = new Option(color, color, null, true); 

和所有你需要做的就是把它添加到原<select>並在其上觸發change事件，因此選擇二（和其他組件）會知道該值改變。

// add the option to the original select, before the "Other" option 
$(option).insertBefore(evt.params.data.element); 

// update the selection 
$element.trigger('change'); 

現在，Select2將顯示新的自定義顏色以及任何其他選擇。用戶還可以通過多次選擇「其他」選項來選擇其他顏色。

所以，把他們放在一起給你下面的代碼

var $element = $("select").select2({ 
    maximumSelectionLength: 5 
}); 

$element.on('select2:select', function (evt) { 
    // check for the custom id 
    if (evt.params.data.id === 'custom') { 
    // unselect the element, so other custom colors can be picked 
    evt.params.data.element.selected = false; 

    // update the selection 
    $(this).trigger('change'); 

    // prompt the user for a color somehow 
    var color = prompt("Pick a color, any color"); 

    // create a new option 
    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option 
    var option = new Option(color, color, null, true); 

    // add the option to the original select, before the "Other" option 
    $(option).insertBefore(evt.params.data.element); 

    // update the selection 
    $element.trigger('change'); 
    } 
}); 

你可以在以下jsbin現場測試：http://jsbin.com/beluximesi/1/edit?html,js,output