Z pluginem select2 jquery z tagami: true, jak można zapobiec wyświetlaniu opcji w menu, które jest już zaznaczone?

Question

Mam migrację do select2 to use as a tagging plugin z innej wtyczki, ale jest jedna luka, którą próbuję dowiedzieć się, czy select2 może obsługiwać.

Spójrzmy na przykład. Powiedzmy, że moja lista wyborów (wracających po stronie serwera z żądania Ajax)

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

W starej wtyczki używam, po tym, jak wybrać jedną z opcji (powiedzmy „Kot”) i pokazuje się w w polu tekstowym, gdy następnym razem wyszukuję ten sam częściowy ciąg znaków (powiedzmy "Ca"), TO NIE "T" Cat "pojawi się w menu rozwijanym opcji (ponieważ wie, że już wcześniej wybrałeś)

Wygląda na to, że select2 nadal pokazuje pozycję w liście rozwijanej podczas wyszukiwania, niezależnie od tego, czy już ją wybrałeś. Opcja2 uniemożliwia wprowadzanie, jeśli po naciśnięciu klawisza Enter, ale wydaje się to nieco nieintuicyjne, więc próbuję ustalić, czy jest jakiś sposób dla select2 do replikowania tego samego behav i lub z drugiej wtyczki (gdzie opcje nie pojawiają się)

Jako kolejny przykład tego działającego poprawnie, sekcja znacznika stackoverflow pytania również robi właściwą rzecz. Jeśli dodaję "jquery" do mojej listy znaczników dla tego pytania, a następnie ponownie wyszukam "jquery", to DOESN "T pokazuje, że na liście (jak już wybrano) .To jest zachowanie, którego szukam dla

Tu jest mój bieżący kod select2.

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; 
} 

Myślę, że w jakiś sposób w funkcji templateResult istnieje sposób zwracania fałszu lub czegoś, co nie pokazuje tego elementu, jeśli jest już wybrany. Czy coś takiego jest możliwe (nie mogę znaleźć coś w Internecie lub w docs)

Answer 1

It brzmi jak szukasz a custom matcher. Korzystanie z nich pozwoli Ci przefiltrować listę rozwijaną przed wyświetleniem jej użytkownikowi.

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

Należy spojrzeć na zmiany funkcji templateResult ...

Funkcja templateResult powinien zwrócić ciąg zawierający tekst będzie lub obiekt (taki jak obiekt jQuery) zawierający dane, które powinny zostać wyświetlone. Może również zwrócić wartość null, co uniemożliwi wyświetlenie opcji na liście wyników.

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

Answer 3

Można to osiągnąć po prostu jak poniżej,

Trzeba ukryć wybrane opcje korzystania 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>