如何設置搜索結果以在select2中預選？

好的，所以我試圖將select2的標記和AJAX功能結合起來用於我的類別選擇。如何設置搜索結果以在select2中預選？

目前，用戶可以搜索要添加到其帖子的類別。我注意到的一件好事是，select2不會讓你選擇兩次相同的選擇（它是灰色的，當你點擊它時沒有任何反應）。

這是我的挑戰......讓我們說一個用戶正在編輯帖子，並且已經選擇了類別。這些類別出現在select2搜索下方。例如，假設用戶選擇了「生活」類別。這將顯示在下面已經檢查過。

雖然用戶搜索「生活」時出現問題。他們將能夠選擇並再次添加。我可以解析前面的選擇並取消選擇，但爲了保持一致性，我真的很想使用select2的內置功能。

那麼如何設置傳入的AJAX結果已被選中，以便它們不能再次被選中？

這是一個小提琴。請注意，在搜索「體驗」時，如何變灰，但「生命」即使已被選中也不是。

function formatStuff(stuff) { 
    if (stuff.loading) return 'Searching...'; 

    markup = "<p>" + stuff.text + "</p>"; 

    return markup; 
} 

function formatRepoSelection(stuff) { 
    return stuff.cat_name || $('.js-select').val(); 
} 

function catAdd() { 
    var addCat = div = clo = label = labelText = null; 

    cat = $('.js-select').select2('data'); 

    addCat = cat[0].text; 

    div = $('#categories-cat_name div.checkbox:first'); 
    clo = div.clone(); 
    $('input[type="checkbox"]', clo).val(addCat); 

    label = $('label', clo); 
    labelText = label[0].childNodes[label[0].childNodes.length - 1]; 
    labelText.textContent = addCat; 

    $(div).before(clo); 
} 


$('.js-select').select2({ 
    tags: true, 
    ajax: { 
     url: 'https://api.myjson.com/bins/58uwe', 
     dataType: 'json', 
     delay: 250, 
     data: function (params) { 
      return { 
       q: params.term 
      }; 
     }, 
     processResults: function (data, page) { 

      var select2Data = $.map(data, function (obj) { 

       obj.id = obj.cat_id; 
       obj.text = obj.cat_name; 

       return obj; 
      }); 

      return { 
       results: select2Data 
      }; 
     }, 
     cache: true 
    }, 
    escapeMarkup: function (markup) { 
     return markup; 
    }, 
    minimumInputLength: 1, 
    templateResult: formatStuff, 
    templateSelection: formatRepoSelection 
}); 

$('.js-select').on('select2:select', function() { 
    catAdd(); 
});

來源

2015-10-05 MikelG

你可以試試這個。

由於您的結果可能是多個，因此您需要將select元素的多個true設置爲啓用它，並將所選選項添加爲默認值。

你可以做它或者JavaScript或HTML。

<div id='select-test'> 
    <select class="js-select" style="width:90%;" multiple=true> 
     <option value="Life" selected=true>Life</option> 
     <option value="Joy" selected=true>Joy</option> 
    </select> 
</div>

來源

2015-10-05 03:27:10

是的我知道這個選項，但它不是我想要的，但是，你給了我一個可能完全消除問題的想法。我會嘗試一下並報告。謝謝！ – MikelG

如何設置搜索結果以在select2中預選？

回答

相關問題