Welcome to nicecountryinput

An easy-to-use country picker.

Dependencies and requirements

Javascript, CSS
jQuery 2.x / 3.x Removed as of v2.0.0
HTML data-* Attributes
Base64 img source support

Features

English and Native country name
Selected country is set by ISO code
Additional selectors for Continents
Additional selectors for All / None
Filter input (works with native and english country name)
No global namespace pollution, everything is in one prototype “NiceCountryInput”
No image files (Every image is saved in the JS file)

Examples

With flags:

        
<div class="niceCountryInputSelector" style="width: 300px;" data-selectedcountry="US" data-showspecial="false" data-showflags="true" data-i18nall="All selected"
    data-i18nnofilter="No selection" data-i18nfilter="Filter" data-onchangecallback="onChangeCallback" />
</div>

Without flags, showing ISO

                
<div class="niceCountryInputSelector" style="width: 300px;" data-selectedcountry="US" data-showspecial="false" data-showflags="false" data-i18nall="All selected"
    data-i18nnofilter="No selection" data-i18nfilter="Filter" data-onchangecallback="onChangeCallback" />
</div>

Continent selection

                
<div class="niceCountryInputSelector" style="width: 300px;" data-selectedcountry="_EU" data-showcontinentsonly="true" data-showflags="true" data-i18nall="All selected"
    data-i18nnofilter="No selection" data-i18nfilter="Filter" data-onchangecallback="onChangeCallback" />
</div>

Country selection with "All" and "None" option. e.g. Used when filtering data by country.

                
<div class="niceCountryInputSelector" style="width: 300px;" data-selectedcountry="_AL" data-showcontinentsonly="false" data-showflags="true" data-i18nall="All selected"
    data-i18nnofilter="No selection" data-i18nfilter="Filter" data-onchangecallback="onChangeCallback" data-showspecial="true"/>
</div>

Initialisation via JS

                    
//call back function (optional)
function onChangeCallback(ctr){
    console.log("The country was changed: " + ctr);
}
//init picker when document is ready  
document.addEventListener("DOMContentLoaded", function(event) { 
    document.querySelectorAll(".niceCountryInputSelector").forEach(element => new NiceCountryInput(element).init());
});