P
Sure thing. I would share the code on codepen or codesandbox if I knew how to set up the whole quasar framework there but let me share with you what I have.
You can collapse the data section.
First npm install or yarn add vue-country-flag, it’s imported in the component below. Copy Paste and you’re good to go.
<template>
<div id="q-app">
<div class="q-pa-md">
<div class="q-gutter-md row">
<q-select
filled
v-model="model"
use-input
input-debounce="0"
language="Simple filter"
:options="options"
@filter="filterFn"
style="width: 250px"
multiple
use-chips
ref="select"
@input="$refs.select.updateInputValue('')"
dense
>
<template v-slot:option="scope">
<q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
<q-item-section>
<q-item-label v-html="scope.opt.label"></q-item-label>
<q-item-label caption>{{ scope.opt.country }}</q-item-label>
</q-item-section>
<q-item-section avatar>
<country-flag
class="rounded"
:country="scope.opt.flag"
size="normal"
/>
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div>
</div>
</template>
<script>
import CountryFlag from "vue-country-flag";
const stringOptions = [
{ label: "Afrikaans", value: "af", country: "South Africa", flag: "za" },
{ label: "Albanian", value: "sq", country: "Albania", flag: "al" },
{ label: "Amharic", value: "am", country: "Ethiopia", flag: "et" },
{ label: "Arabic",value: "ar-ae",country: "United Arab Emirates",flag: "ae"},
{ label: "Arabic", value: "ar-bh", country: "Bahrain", flag: "bh" },
{ label: "Arabic", value: "ar-dz", country: "Algeria", flag: "dz" },
{ label: "Arabic", value: "ar-eg", country: "Egypt", flag: "eg" },
{ label: "Arabic", value: "ar-iq", country: "Iraq", flag: "iq" },
{ label: "Arabic", value: "ar-jo", country: "Jordan", flag: "jo" },
{ label: "Arabic", value: "ar-kw", country: "Kuwait", flag: "kw" },
{ label: "Arabic", value: "ar-lb", country: "Lebanon", flag: "lb" },
{ label: "Arabic", value: "ar-ly", country: "Libya", flag: "ly" },
{ label: "Arabic", value: "ar-ma", country: "Morocco", flag: "ma" },
{ label: "Arabic", value: "ar-mr", country: "Mauritania", flag: "mr" },
{ label: "Arabic", value: "ar-om", country: "Oman", flag: "om" },
{label: "Arabic",value: "ar-ps",country: "Palestine, State of",flag: "ps"},
{ label: "Arabic", value: "ar-qa", country: "Qatar", flag: "qa" },
{ label: "Arabic", value: "ar-sa", country: "Saudi Arabia", flag: "sa" },
{ label: "Arabic", value: "ar-sd", country: "Sudan", flag: "sd" },
{ label: "Arabic", value: "ar-so", country: "Somalia", flag: "so" },
{label: "Arabic",value: "ar-sy",country: "Syrian Arab Republic",flag: "sy"},
{ label: "Arabic", value: "ar-tn", country: "Tunisia", flag: "tn" },
{ label: "Arabic", value: "ar-ye", country: "Yemen", flag: "ye" },
{ label: "Armenian", value: "hy", country: "Armenia", flag: "am" },
{label: "Azerbaijani",value: "az-az",country: "Azerbaijan",flag: "az"},
{ label: "Belarusian", value: "be", country: "Belarus", flag: "by" },
{ label: "Bengali", value: "bn", country: "Bangladesh", flag: "bd" },
{ label: "Bislama", value: "bi", country: "Vanuatu", flag: "vu" },
{label: "Bosnian",value: "bs",country: "Bosnia and Herzegovina",flag: "ba"},
{ label: "Bulgarian", value: "bg", country: "Bulgaria", flag: "bg" },
{ label: "Burmese", value: "my", country: "Myanmar", flag: "mm" },
{ label: "Catalan", value: "ca", country: "Andorra", flag: "ad" },
{ label: "Chichewa", value: "ny", country: "Malawi", flag: "mw" },
{ label: "Chinese Mandarin", value: "zh", country: "China", flag: "cn" },
{label: "Chinese Mandarin",value: "zh-tw",country: "Taiwan, Province of China",flag: "tw"},
{ label: "Croatian", value: "hr", country: "Croatia", flag: "hr" },
{ label: "Czech", value: "cs", country: "Czechia", flag: "cz" },
{ label: "Danish", value: "da", country: "Denmark", flag: "dk" },
{ label: "Dhivehi", value: "dv", country: "Maldives", flag: "mv" },
{ label: "Dutch", value: "nl-be", country: "Belgium", flag: "be" },
{ label: "Dutch", value: "nl-nl", country: "Netherlands", flag: "nl" },
{ label: "Dutch", value: "nl-sr", country: "Suriname", flag: "sr" },
{ label: "Dzongkha", value: "dz", country: "Bhutan", flag: "bt" },
{label: "English",value: "en-ag",country: "Antigua and Barbuda",flag: "ag"},
{ label: "English", value: "en-au", country: "Australia", flag: "au" },
{ label: "English", value: "en-bb", country: "Barbados", flag: "bb" },
{ label: "English", value: "en-bs", country: "Bahamas", flag: "bs" },
{ label: "English", value: "en-bz", country: "Belize", flag: "bz" },
{ label: "English", value: "en-ca", country: "Canada", flag: "ca" },
{ label: "English", value: "en-ga", country: "Gambia", flag: "gm" },
{label: "English",value: "en-gb",country: "United Kingdom",flag: "gb"},
{ label: "English", value: "en-gd", country: "Grenada", flag: "gd" },
{ label: "English", value: "en-gh", country: "Ghana", flag: "gh" },
{ label: "English", value: "en-gy", country: "Guyana", flag: "gy" },
{ label: "English", value: "en-in", country: "India", flag: "in" },
{ label: "English", value: "en-ir", country: "Ireland", flag: "ie" },
{ label: "English", value: "en-jm", country: "Jamaica", flag: "jm" },
{ label: "English", value: "en-ke", country: "Kenya", flag: "ke" },
{ label: "English", value: "en-ki", country: "Kiribati", flag: "ki" },
{label: "English",value: "en-kn",country: "Saint Kitts and Nevis",flag: "kn"},
{ label: "English", value: "en-lc", country: "Saint Lucia", flag: "lc" },
{ label: "English", value: "en-lr", country: "Liberia", flag: "lr" },
{label: "English",value: "en-mh",country: "Marshall Islands",flag: "mh"},
{ label: "English", value: "en-mu", country: "Mauritius", flag: "mu" },
{ label: "English", value: "en-na", country: "Namibia", flag: "na" },
{ label: "English", value: "en-ng", country: "Nigeria", flag: "ng" },
{ label: "English", value: "en-nz", country: "New Zealand", flag: "nz" },
{label: "English",value: "en-sb",country: "Solomon Islands",flag: "sb"},
{ label: "English", value: "en-sg", country: "Singapore", flag: "sg" },
{ label: "English", value: "en-sl", country: "Sierra Leone", flag: "sl" },
{ label: "English", value: "en-ss", country: "South Sudan", flag: "ss" },
{ label: "English", value: "en-to", country: "Tonga", flag: "to" },
{label: "English",value: "en-tt",country: "Trinidad and Tobago",flag: "tt"},
{label: "English",value: "en-tz",country: "Tanzania, United Republic of",flag: "tz"},
{label: "English",value: "en-us",country: "United States of America",flag: "us"},
{ label: "English", value: "en-ws", country: "Samoa", flag: "ws" },
{ label: "English", value: "en-zm", country: "Zambia", flag: "zm" },
{ label: "Estonian", value: "et-ee", country: "Estonia", flag: "ee" },
{ label: "Fijan", value: "fj-fj", country: "Fiji", flag: "fj" },
{ label: "Filipino", value: "fil-ph", country: "Philippines", flag: "ph" },
{ label: "Finnish", value: "fi-fi", country: "Finland", flag: "fi" },
{ label: "French", value: "fr-be", country: "Belgium", flag: "be" },
{ label: "French", value: "fr-bf", country: "Burkina Faso", flag: "bf" },
{ label: "French", value: "fr-bj", country: "Benin", flag: "bj" },
{ label: "French", value: "fr-ca", country: "Canada", flag: "ca" },
{label: "French",value: "fr-cd",country: "Congo, Democratic Republic of the",flag: "cd"},
{label: "French",value: "fr-cf",country: "Central African Republic",flag: "cf"},
{ label: "French", value: "fr-ch", country: "Switzerland", flag: "ch" },
{ label: "French", value: "fr-cm", country: "Cameroon", flag: "cm" },
{ label: "French", value: "fr-fr", country: "France", flag: "fr" },
{ label: "French", value: "fr-ga", country: "Gabon", flag: "ga" },
{ label: "French", value: "fr-gf", country: "French Guiana", flag: "gf" },
{ label: "French", value: "fr-gn", country: "Guinea", flag: "gn" },
{ label: "French", value: "fr-ht", country: "Haiti", flag: "ht" },
{ label: "French", value: "fr-mc", country: "Monaco", flag: "mc" },
{label: "French",value: "fr-mf",country: "Saint Martin (French part)",flag: "mf"},
{ label: "French", value: "fr-mg", country: "Madagascar", flag: "mg" },
{ label: "French", value: "fr-ml", country: "Mali", flag: "ml" },
{ label: "French", value: "fr-ne", country: "Niger", flag: "ne" },
{label: "French",value: "fr-pf",country: "French Polynesia",flag: "pf"},
{ label: "French", value: "fr-sn", country: "Senegal", flag: "sn" },
{ label: "French", value: "fr-td", country: "Chad", flag: "td" },
{label: "French",value: "fr-tf",country: "French Southern Territories",flag: "tf"},
{ label: "French", value: "fr-tg", country: "Togo", flag: "tg" },
{ label: "Georgian", value: "ka-ge", country: "Georgia", flag: "ge" },
{ label: "German", value: "de-at", country: "Austria", flag: "at" },
{ label: "German", value: "de-be", country: "Belgium", flag: "be" },
{ label: "German", value: "de-ch", country: "Switzerland", flag: "ch" },
{ label: "German", value: "de-de", country: "Germany", flag: "de" },
{ label: "German", value: "de-li", country: "Liechtenstein", flag: "li" },
{ label: "Greek", value: "el-cy", country: "Cyprus", flag: "cy" },
{ label: "Greek", value: "el-gr", country: "Greece", flag: "gr" },
{ label: "Guaran�", value: "gn", country: "Paraguay", flag: "py" },
{ label: "Hebrew", value: "he", country: "Israel", flag: "il" },
{ label: "Hindi", value: "hi", country: "Fiji", flag: "fj" },
{ label: "Hindi", value: "hi", country: "India", flag: "in" },
{ label: "Hungarian", value: "hu", country: "Hungary", flag: "hu" },
{ label: "Icelandic", value: "is", country: "Iceland", flag: "is" },
{ label: "Indonesian", value: "id", country: "Indonesia", flag: "id" },
{ label: "Irish", value: "ga", country: "Ireland", flag: "ie" },
{ label: "Italian", value: "it", country: "Italy", flag: "it" },
{ label: "Italian", value: "it", country: "San Marino", flag: "sm" },
{ label: "Italian", value: "it", country: "Switzerland", flag: "ch" },
{ label: "Japanese", value: "ja", country: "Japan", flag: "jp" },
{ label: "Kazakh", value: "kk", country: "Kazakhstan", flag: "kz" },
{ label: "Khmer", value: "km-kh", country: "Cambodia", flag: "kh" },
{ label: "Kinyarwanda", value: "rw", country: "Rwanda", flag: "rw" },
{label: "Korean",value: "ko",country: "Korea, Democratic People's Republic of",flag: "kp"},
{label: "Korean",value: "ko",country: "Korea, Republic of",flag: "kr"},
{ label: "Kurdish", value: "ku", country: "Iraq", flag: "iq" },
{ label: "Kurdish", value: "ku", country: "Turkey", flag: "tr" },
{ label: "Kyrgyz", value: "ky", country: "Kyrgyzstan", flag: "kg" },
{ label: "Latvian", value: "lv", country: "Latvia", flag: "lv" },
{ label: "Lithuanian", value: "lt", country: "Lithuania", flag: "lt" },
{ label: "Luxembourish", value: "lb", country: "Luxembourg", flag: "lu" },
{label: "Macedonian",value: "mk",country: "North Macedonia",flag: "mk"},
{ label: "Malay", value: "ms", country: "Brunei Darussalam", flag: "bn" },
{ label: "Malay", value: "ms", country: "Malaysia", flag: "my" },
{ label: "Maltese", value: "mt", country: "Malta", flag: "mt" },
{ label: "Mongolian", value: "mn", country: "Mongolia", flag: "mn" },
{ label: "Nauruan", value: "na", country: "Nauru", flag: "nr" },
{ label: "Nepali", value: "ne", country: "Nepal", flag: "np" },
{ label: "Norwegian", value: "no", country: "Norway", flag: "no" },
{ label: "Oromo", value: "om", country: "Ethiopia", flag: "et" },
{ label: "Palauan", value: "pau", country: "Palau", flag: "pw" },
{ label: "Pashto", value: "ps", country: "Afghanistan", flag: "af" },
{label: "Persian",value: "fa",country: "Iran (Islamic Republic of)",flag: "ir"},
{ label: "Polish", value: "pt-gw", country: "Poland", flag: "pl" },
{label: "Porteguese",value: "pt-ao",country: "Guinea-Bissau",flag: "gw"},
{ label: "Portuguese", value: "pt-br", country: "Angola", flag: "ao" },
{ label: "Portuguese", value: "pt-cv", country: "Brazil", flag: "br" },
{ label: "Portuguese", value: "pt-mz", country: "Cape Verde", flag: "cv" },
{ label: "Portuguese", value: "pt-pt", country: "Mozambique", flag: "mz" },
{ label: "Portuguese", value: "pt-st", country: "Portugal", flag: "pt" },
{label: "Potuguese",value: "pt-ro",country: "Sao Tome and Principe",flag: "st"},
{ label: "Romanian", value: "ro", country: "Romania", flag: "ro" },
{label: "Romanian",value: "ro-md",country: "Moldova, Republic of",flag: "md"},
{ label: "Romansh", value: "rm", country: "Switzerland", flag: "ch" },
{label: "Russian",value: "ru",country: "Russian Federation",flag: "ru"},
{ label: "Sami", value: "se", country: "Norway", flag: "no" },
{ label: "Scottish", value: "gd", country: "United Kingdom", flag: "gb" },
{ label: "Serbian", value: "sr", country: "Serbia", flag: "rs" },
{ label: "Shona", value: "sn", country: "Zimbabwe", flag: "zw" },
{ label: "Sinhala", value: "si", country: "Sri Lanka", flag: "lk" },
{ label: "Slovak", value: "sk", country: "Slovakia", flag: "sk" },
{ label: "Slovene", value: "sl", country: "Slovenia", flag: "si" },
{ label: "Sotho", value: "st", country: "Lesotho", flag: "ls" },
{ label: "Spanish", value: "es-ar", country: "Argentina", flag: "ar" },
{label: "Spanish",value: "es-bo",country: "Bolivia (Plurinational State of)",flag: "bo"},
{ label: "Spanish", value: "es-cl", country: "Chile", flag: "cl" },
{ label: "Spanish", value: "es-co", country: "Colombia", flag: "co" },
{ label: "Spanish", value: "es-cu", country: "Cuba", flag: "cu" },
{label: "Spanish",value: "es-do",country: "Dominican Republic",flag: "do"},
{ label: "Spanish", value: "es-ec", country: "Ecuador", flag: "ec" },
{ label: "Spanish", value: "es-es", country: "Spain", flag: "es" },
{label: "Spanish",value: "es-gq",country: "Equatorial Guinea",flag: "gq"},
{ label: "Spanish", value: "es-gt", country: "Guatemala", flag: "gt" },
{ label: "Spanish", value: "es-hn", country: "Honduras", flag: "hn" },
{ label: "Spanish", value: "es-mx", country: "Mexico", flag: "mx" },
{ label: "Spanish", value: "es-ni", country: "Nicaragua", flag: "ni" },
{ label: "Spanish", value: "es-pa", country: "Panama", flag: "pa" },
{ label: "Spanish", value: "es-pe", country: "Peru", flag: "pe" },
{ label: "Spanish", value: "es-sv", country: "El Salvador", flag: "sv" },
{ label: "Spanish", value: "es-uy", country: "Uruguay", flag: "uy" },
{label: "Spanish",value: "es-ve",country: "Venezuela (Bolivarian Republic of)",flag: "ve"},
{ label: "Swahili", value: "sw", country: "Uganda", flag: "ug" },
{ label: "Swedish", value: "sv", country: "Sweden", flag: "se" },
{ label: "Tajik", value: "tg", country: "Tajikistan", flag: "tj" },
{ label: "Thai", value: "th", country: "Thailand", flag: "th" },
{ label: "Tigrinya", value: "ti", country: "Eritrea", flag: "er" },
{label: "Tok Pisin",value: "tpi",country: "Papua New Guinea",flag: "pg"},
{ label: "Tswana", value: "tn-bw", country: "Botswana", flag: "bw" },
{ label: "Turkish", value: "tr-cy", country: "Cyprus", flag: "cy" },
{ label: "Turkish", value: "tr-tr", country: "Turkey", flag: "tr" },
{ label: "Turkmen", value: "tk", country: "Turkmenistan", flag: "tm" },
{ label: "Tuvaluan", value: "tvl", country: "Tuvalu", flag: "tv" },
{ label: "Ukrainian", value: "uk", country: "Ukraine", flag: "ua" },
{ label: "Urdu", value: "ur", country: "Pakistan", flag: "pk" },
{ label: "Uzbek", value: "uz", country: "Uzbekistan", flag: "uz" },
{ label: "Vietnamese", value: "vi", country: "Viet Nam", flag: "vn" },
{ label: "Welsh", value: "cy", country: "United Kingdom", flag: "gb" }
];
export default {
components: { CountryFlag },
data() {
return {
model: [],
options: stringOptions
};
},
methods: {
filterFn(val, update) {
if (val === "") {
update(() => {
this.options = stringOptions;
console.log("this.modelfilter:", this.model);
});
return;
}
update(
() => {
const needle = val.toLowerCase();
this.options = stringOptions.filter(
v => v.toLowerCase().indexOf(needle) > -1
);
},
ref => {
if (this.options.length > 0) {
ref.setOptionIndex(0);
}
}
);
}
}
};
</script>
