Với plugin jquery select2 có thẻ: đúng, bạn có thể ngăn các lựa chọn hiển thị trong trình đơn thả xuống đã được chọn như thế nào?

Question

Tôi đang di chuyển sang select2 to use as a tagging plugin từ một plugin khác nhưng có một khoảng trống mà tôi đang cố gắng tìm ra nếu select2 có thể hỗ trợ.

Hãy xem ví dụ. Cho phép nói rằng danh sách các lựa chọn (quay trở lại phía máy chủ từ yêu cầu Ajax) là

"Dog", "Cat", "Monkey", "Giraffe" 

Trong plugin cũ Tôi đang sử dụng, sau khi tôi chọn một trong những lựa chọn (cho phép nói "Cát") và nó xuất hiện trong hộp văn bản, lần sau tôi tìm kiếm cùng một chuỗi (cho phép nói "Ca"), nó KHÔNG "T có" Cat "hiển thị trong danh sách lựa chọn (vì nó biết rằng trước đó bạn đã chọn nó)

Có vẻ như select2 vẫn hiển thị mục trong trình đơn thả xuống khi tìm kiếm bất kể bạn đã chọn nó chưa. Chọn 2 không ngăn nhập nếu sau khi bạn nhấn enter nhưng điều này có vẻ hơi khó hiểu vì vậy tôi đang cố gắng tìm hiểu xem có cách nào không để select2 nhân rộng cùng một hành vi ior từ các plugin khác (nơi các lựa chọn thậm chí không hiển thị)

Một ví dụ khác về cách này hoạt động đúng cách, phần thẻ stackoverflow của câu hỏi cũng làm đúng. Nếu tôi thêm "jquery" vào danh sách các thẻ cho câu hỏi này và sau đó tìm kiếm "jquery" một lần nữa, nó DOESN "T cho thấy rằng trong danh sách (như đã được chọn). Đó là hành vi mà tôi đang tìm kiếm cho

đây là mã Select2 hiện tại của tôi:.

HTML:

<select id="Tags" name="Tags" multiple="multiple"> 
</select> 

Javascript:

function SetupAppTags() { 
$("#Tags").select2({ 
    theme: "classic", 
    width: "98%", 
    tags: true, 
    ajax: { 
     url: "/Tag/Search", 
     dataType: 'json', 
     delay: 300, 
     data: function(params) { 
      return { q: params.term }; 
     }, 
     processResults: function(data, params) { 
      return { results: data }; 
     }, 
     cache: false 
    }, 
    escapeMarkup: function(markup) { return markup; }, 
    minimumInputLength: 3, 
    templateResult: tagFormatResult, 
    templateSelection: tagSelectionResult 
}); 
} 

function tagFormatResult(tag) { 

    if (tag.loading) { 
    return "Loading . . ."; 
} else { 
    if (tag.name) { 
     return tag.name; 
    } 
    return tag.text + " [NEW]"; 
} 
} 

function tagSelectionResult(tag) { 
    if (tag.name) { 
    return tag.name; 
    } 
    return tag.text; 
} 

Tôi nghĩ rằng bằng cách nào đó trong hàm templateResult có một cách để trả về false hoặc một cái gì đó không hiển thị mục đó nếu nó đã được chọn. Là một cái gì đó như thế này có thể (không thể tìm thấy bất cứ điều gì trên mạng hoặc trong các tài liệu)

Answer 1

Nó có vẻ như bạn đang tìm kiếm a custom matcher. Sử dụng một cái sẽ cho phép bạn lọc các mục thả xuống trước khi hiển thị nó cho người dùng.

var $t = $('#target'); 
 
$t.select2({ 
 
    multiple: true, 
 
    tags: true, 
 
    data: ["Pasty", "Pasta", "Posters"], 
 
    matcher: function(params, option) { 
 
    var selected = $t.select2('data'); 
 
    var optionSelected = selected.some(function(item) { 
 
     return (item.text === option.text); 
 
    }); 
 
    if (optionSelected) return false; 
 
    return option; 
 
    } 
 
});

#target { 
 
    width: 100%; 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> 
 
<select id="target"></select>

Answer 2

Bạn nên xem xét thay đổi chức năng templateResult ...

Chức năng templateResult nên trả về một chuỗi chứa văn bản được được hiển thị hoặc một đối tượng (chẳng hạn như đối tượng jQuery) có chứa dữ liệu sẽ được hiển thị. Nó cũng có thể trả về null, điều này sẽ ngăn không cho tùy chọn hiển thị trong danh sách kết quả.

https://select2.github.io/options.html#templateSelection

Answer 3

Bạn có thể đạt được điều này chỉ đơn giản như dưới đây,

Bạn cần phải che giấu các tùy chọn lựa chọn sử dụng CSS

$('select').select2();

.select2-container--default .select2-results__option[aria-selected=true] { 
 
    display: none; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> 
 

 
<select id="Tags" name="Tags" multiple="multiple"> 
 
    <option value="1">first</option> 
 
    <option value="2">second</option> 
 
    <option value="3">third</option> 
 
    <option value="4">fourth</option> 
 
</select>