Filterable Country & Continent Picker For jQuery - niceCountryInput

niceCountryInput is a convenient country picker plugin that enables the user to select countries, continents, regions from a filterable dropdown list, with support for country flags and ISO codes.

See also:

• international telephone Input With Flags and Dial Codes

How to use it:

1. Import the latest jQuery library and the niceCountryInput's files into the html file.

<link rel="stylesheet" href="niceCountryInput.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="niceCountryInput.js"></script>

2. Create an empty DIV container and config the country picker with the following data attributes:

• data-selectedcountry: pre-selected contry
• data-showspecial: shows special countries
• data-showflags: shows country flags (base64 image). Set to false to show ISO-3166-1 Alpha-2 codes.
• data-i18nall: text for All selected
• data-i18nnofilter: text for No selection
• data-i18nfilter: text for Filter
• data-onchangecallback: callback function
• data-showcontinentsonly: shows continents only

<div class="example" 
     data-selectedcountry="US" 
     data-showspecial="false" 
     data-showflags="true" 
     data-i18nall="All selected"
     data-i18nnofilter="No selection" 
     data-i18nfilter="Filter" 
     data-onchangecallback="onChangeCallback">
</div>

3. Initialize the country picker and done.

$(function(){

  new NiceCountryInput($("#example")).init();

});

4. Define your own function that will be triggered on country change.

function onChangeCallback(ctr){
  console.log("The country was changed: " + ctr);
}

Changelog:

2018-06-06

• Re-init appends additional menus

---

This awesome jQuery plugin is developed by masbaehr. For more Advanced Usages, please check the demo page or visit the official website.