Components Multiselect

Multiselct

Tags können in einer Javascript Whitelist Variable als Array oder Object eingefügt werden.

Selected Background
#005CA9
Selected Font
#000000
Mouse Over Background
#F0F0F0
Mouse Over Font
#2B88D8 diese Farbe ist nicht genug Kontrastreich, stattdessen wird diese (#196CB1) verwendet!
Disabled Font
#B3B3B3
Border-Width (gesamte Box)
1 px

    
    
    



var input = document.querySelector('input[name="custom-tag-select"]'),
// init Tagify script on the above inputs
tagify = new Tagify(input, {
    whitelist: [
      'Afghanistan', 'Åland Islands', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Cayman Islands', 'Central African Republic', 'Chad'
    ],
    //whitelist : [
    //      { value:'Afghanistan', code:'AF' },
    //      { value:'Åland Islands', code:'AX' },
    //      { value:'Albania', code:'AL' },
    //      { value:'Algeria', code:'DZ' },
    //      { value:'American Samoa', code:'AS' },
    //      { value:'Andorra', code:'AD' },
    //      { value:'Angola', code:'AO' },
    //      { value: 'Anguilla', code: 'AI' },
    //      { value:'Bahamas', code:'BS' },
    //      { value:'Bahrain', code:'BH' },
    //      { value:'Bangladesh', code:'BD' },
    //      { value:'Barbados', code:'BB' },
    //      { value: 'Belarus', code: 'BY' },
    //      { value:'Cambodia', code:'KH' },
    //      { value:'Cameroon', code:'CM' },
    //      { value:'Canada', code:'CA' },
    //      { value:'Cape Verde', code:'CV' },
    //      { value:'Cayman Islands', code:'KY' },
    //      { value:'Central African Republic', code:'CF' },
    //      { value:'Chad', code:'TD' },
    //],
    maxTags: 10,
    enforceWhitelist: false,     // Nur Dropdown Resultate erlauben, keine eigenen!
    dropdown: {
        maxItems: 20,
        classname: "multiselect__dropdown",
        enabled: 0,
        closeOnSelect: false
    },
    // // Custon Template
    //templates: {
    //    tag: tagTemplate
    //}
})

function tagTemplate(tagData) {
    return `
        
        

            ${tagData.value}
        

        
        `
}

OSI Hilfe Dialog