From 16281ee1cac9bb56249ba96bf104b8f4bc37153c Mon Sep 17 00:00:00 2001
From: Mads Jensen <mads@compaya.dk>
Date: Wed, 3 Oct 2018 15:18:44 +0200
Subject: [PATCH 01/10] [BUG] Added a click event to the generated button and a
 toggle() on the OL list when an item is clicked. Minor other changes, like
 switching all 'var's to, the ES6 standard, 'let'

---
 src/jquery.flagstrap.js | 71 +++++++++++++++++++++--------------------
 1 file changed, 37 insertions(+), 34 deletions(-)

diff --git a/src/jquery.flagstrap.js b/src/jquery.flagstrap.js
index 77a0212..8b546d7 100644
--- a/src/jquery.flagstrap.js
+++ b/src/jquery.flagstrap.js
@@ -8,7 +8,8 @@
  */
 (function ($) {
 
-    var defaults = {
+    let defaults = {
+        inputId: undefined,
         buttonSize: "btn-md",
         buttonType: "btn-default",
         labelMargin: "10px",
@@ -21,7 +22,7 @@
         selectedCountry: ''
     };
 
-    var countries = {
+    let countries = {
         "AF": "Afghanistan",
         "AL": "Albania",
         "DZ": "Algeria",
@@ -268,17 +269,17 @@
 
     $.flagStrap = function (element, options, i) {
 
-        var plugin = this;
+        let plugin = this;
 
-        var uniqueId = generateId(8);
+        let uniqueId = generateId(8);
 
         plugin.countries = {};
         plugin.selected = { value: null, text: null };
         plugin.settings = { inputName: 'country-' + uniqueId };
 
-        var $container = $(element);
-        var htmlSelectId = 'flagstrap-' + uniqueId;
-        var htmlSelect = '#' + htmlSelectId;
+        let $container = $(element);
+        let htmlSelectId = 'flagstrap-' + uniqueId;
+        let htmlSelect = '#' + htmlSelectId;
 
         plugin.init = function () {
 
@@ -308,7 +309,7 @@
             // Check to see if the onSelect callback method is assigned / callable, bind the change event for broadcast
             if (plugin.settings.onSelect !== undefined && plugin.settings.onSelect instanceof Function) {
                 $(htmlSelect).change(function (event) {
-                    var element = this;
+                    let element = this;
                     options.onSelect($(element).val(), element);
                 });
             }
@@ -318,11 +319,11 @@
 
         };
 
-        var buildHtmlSelect = function () {
-            var htmlSelectElement = $('<select/>').attr('id', htmlSelectId).attr('name', plugin.settings.inputName);
+        let buildHtmlSelect = function () {
+            let htmlSelectElement = $('<select/>').attr('id', htmlSelectId).attr('name', plugin.settings.inputName);
 
             $.each(plugin.countries, function (code, country) {
-                var optionAttributes = { value: code };
+                let optionAttributes = { value: code };
                 if (plugin.settings.selectedCountry !== undefined) {
                     if (plugin.settings.selectedCountry === code) {
                         optionAttributes = { value: code, selected: "selected" };
@@ -343,30 +344,33 @@
             return htmlSelectElement;
         };
 
-        var buildDropDownButton = function () {
+        let buildDropDownButton = function () {
 
-            var selectedText = $(htmlSelect).find('option').first().text();
-            var selectedValue = $(htmlSelect).find('option').first().val();
+            let firstOption = $(htmlSelect + ' option:first-child');
+            let selectedText = firstOption.text();
+            let selectedValue = firstOption.val();
+            let selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-placeholder');
 
             selectedText = plugin.selected.text || selectedText;
             selectedValue = plugin.selected.value || selectedValue;
 
             if (selectedValue !== plugin.settings.placeholder.value) {
-                var $selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
-            } else {
-                var $selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-placeholder');
+                selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
             }
 
-            var buttonLabel = $('<span/>')
+            let buttonLabel = $('<span/>')
                 .addClass('flagstrap-selected-' + uniqueId)
-                .html($selectedLabel)
+                .html(selectedLabel)
                 .append(selectedText);
 
-            var button = $('<button/>')
+            let button = $('<button/>')
                 .attr('type', 'button')
                 .attr('data-toggle', 'dropdown')
                 .attr('id', 'flagstrap-drop-down-' + uniqueId)
                 .addClass('btn ' + plugin.settings.buttonType + ' ' + plugin.settings.buttonSize + ' dropdown-toggle')
+                .on('click', function (e) {
+                    $('#flagstrap-drop-down-' + uniqueId + '-list').toggle();
+                })
                 .html(buttonLabel);
 
             $('<span/>')
@@ -378,8 +382,8 @@
 
         };
 
-        var buildDropDownButtonItemList = function () {
-            var items = $('<ul/>')
+        let buildDropDownButtonItemList = function () {
+            let items = $('<ul/>')
                 .attr('id', 'flagstrap-drop-down-' + uniqueId + '-list')
                 .attr('aria-labelled-by', 'flagstrap-drop-down-' + uniqueId)
                 .addClass('dropdown-menu');
@@ -391,22 +395,20 @@
             }
 
             // Populate the bootstrap dropdown item list
-            $(htmlSelect).find('option').each(function () {
+            $(htmlSelect + ' option').each(function () {
 
                 // Get original select option values and labels
-                var text = $(this).text();
-                var value = $(this).val();
+                let text = $(this).text();
+                let value = $(this).val();
+                let flagIcon = null;
 
                 // Build the flag icon
                 if (value !== plugin.settings.placeholder.value) {
-                    var flagIcon = $('<i/>').addClass('flagstrap-icon flagstrap-' + value.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
-                } else {
-                    var flagIcon = null;
+                    flagIcon = $('<i/>').addClass('flagstrap-icon flagstrap-' + value.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
                 }
 
-
                 // Build a clickable drop down option item, insert the flag and label, attach click event
-                var flagStrapItem = $('<a/>')
+                let flagStrapItem = $('<a/>')
                     .attr('data-val', $(this).val())
                     .html(flagIcon)
                     .append(text)
@@ -414,11 +416,12 @@
                         $(htmlSelect).val($(this).data('val'));
                         $(htmlSelect).trigger('change');
                         $('.flagstrap-selected-' + uniqueId).html($(this).html());
+                        $('#flagstrap-drop-down-' + uniqueId + '-list').toggle();
                         e.preventDefault();
                     });
 
                 // Make it a list item
-                var listItem = $('<li/>').prepend(flagStrapItem);
+                let listItem = $('<li/>').prepend(flagStrapItem);
 
                 // Append it to the drop down item list
                 items.append(listItem);
@@ -429,14 +432,14 @@
         };
 
         function generateId(length) {
-            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
+            let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
 
             if (!length) {
                 length = Math.floor(Math.random() * chars.length);
             }
 
-            var str = '';
-            for (var i = 0; i < length; i++) {
+            let str = '';
+            for (let i = 0; i < length; i++) {
                 str += chars[Math.floor(Math.random() * chars.length)];
             }
             return str;

From 1839831184722525fcdc0131f7f02ad0de9fd76c Mon Sep 17 00:00:00 2001
From: Mads Jensen <mads@compaya.dk>
Date: Thu, 4 Oct 2018 14:15:26 +0200
Subject: [PATCH 02/10] [TASK] Moved changes to dist and minified the (changed)
 source.

---
 dist/js/jquery.flagstrap.js     | 87 +++++++++++++++++----------------
 dist/js/jquery.flagstrap.min.js | 31 +-----------
 2 files changed, 47 insertions(+), 71 deletions(-)

diff --git a/dist/js/jquery.flagstrap.js b/dist/js/jquery.flagstrap.js
index 85f0e58..8b546d7 100644
--- a/dist/js/jquery.flagstrap.js
+++ b/dist/js/jquery.flagstrap.js
@@ -8,7 +8,8 @@
  */
 (function ($) {
 
-    var defaults = {
+    let defaults = {
+        inputId: undefined,
         buttonSize: "btn-md",
         buttonType: "btn-default",
         labelMargin: "10px",
@@ -17,10 +18,11 @@
         placeholder: {
             value: '',
             text: 'Please select country'
-        }
+        },
+        selectedCountry: ''
     };
 
-    var countries = {
+    let countries = {
         "AF": "Afghanistan",
         "AL": "Albania",
         "DZ": "Algeria",
@@ -267,17 +269,17 @@
 
     $.flagStrap = function (element, options, i) {
 
-        var plugin = this;
+        let plugin = this;
 
-        var uniqueId = generateId(8);
+        let uniqueId = generateId(8);
 
         plugin.countries = {};
-        plugin.selected = {value: null, text: null};
-        plugin.settings = {inputName: 'country-' + uniqueId};
+        plugin.selected = { value: null, text: null };
+        plugin.settings = { inputName: 'country-' + uniqueId };
 
-        var $container = $(element);
-        var htmlSelectId = 'flagstrap-' + uniqueId;
-        var htmlSelect = '#' + htmlSelectId;
+        let $container = $(element);
+        let htmlSelectId = 'flagstrap-' + uniqueId;
+        let htmlSelect = '#' + htmlSelectId;
 
         plugin.init = function () {
 
@@ -307,7 +309,7 @@
             // Check to see if the onSelect callback method is assigned / callable, bind the change event for broadcast
             if (plugin.settings.onSelect !== undefined && plugin.settings.onSelect instanceof Function) {
                 $(htmlSelect).change(function (event) {
-                    var element = this;
+                    let element = this;
                     options.onSelect($(element).val(), element);
                 });
             }
@@ -317,54 +319,58 @@
 
         };
 
-        var buildHtmlSelect = function () {
-            var htmlSelectElement = $('<select/>').attr('id', htmlSelectId).attr('name', plugin.settings.inputName);
+        let buildHtmlSelect = function () {
+            let htmlSelectElement = $('<select/>').attr('id', htmlSelectId).attr('name', plugin.settings.inputName);
 
             $.each(plugin.countries, function (code, country) {
-                var optionAttributes = {value: code};
+                let optionAttributes = { value: code };
                 if (plugin.settings.selectedCountry !== undefined) {
                     if (plugin.settings.selectedCountry === code) {
-                        optionAttributes = {value: code, selected: "selected"};
-                        plugin.selected = {value: code, text: country}
+                        optionAttributes = { value: code, selected: "selected" };
+                        plugin.selected = { value: code, text: country }
                     }
                 }
                 htmlSelectElement.append($('<option>', optionAttributes).text(country));
             });
 
             if (plugin.settings.placeholder !== false) {
-                htmlSelectElement.prepend($('<option>', {
+                htmlSelectElement.prepend($('<option selected>', {
                     value: plugin.settings.placeholder.value,
-                    text: plugin.settings.placeholder.text
+                    text: plugin.settings.placeholder.text,
                 }));
+                plugin.selected = { value: plugin.settings.placeholder.value, text: plugin.settings.placeholder.text }
             }
 
             return htmlSelectElement;
         };
 
-        var buildDropDownButton = function () {
+        let buildDropDownButton = function () {
 
-            var selectedText = $(htmlSelect).find('option').first().text();
-            var selectedValue = $(htmlSelect).find('option').first().val();
+            let firstOption = $(htmlSelect + ' option:first-child');
+            let selectedText = firstOption.text();
+            let selectedValue = firstOption.val();
+            let selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-placeholder');
 
             selectedText = plugin.selected.text || selectedText;
             selectedValue = plugin.selected.value || selectedValue;
 
             if (selectedValue !== plugin.settings.placeholder.value) {
-                var $selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
-            } else {
-                var $selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-placeholder');
+                selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
             }
 
-            var buttonLabel = $('<span/>')
+            let buttonLabel = $('<span/>')
                 .addClass('flagstrap-selected-' + uniqueId)
-                .html($selectedLabel)
+                .html(selectedLabel)
                 .append(selectedText);
 
-            var button = $('<button/>')
+            let button = $('<button/>')
                 .attr('type', 'button')
                 .attr('data-toggle', 'dropdown')
                 .attr('id', 'flagstrap-drop-down-' + uniqueId)
                 .addClass('btn ' + plugin.settings.buttonType + ' ' + plugin.settings.buttonSize + ' dropdown-toggle')
+                .on('click', function (e) {
+                    $('#flagstrap-drop-down-' + uniqueId + '-list').toggle();
+                })
                 .html(buttonLabel);
 
             $('<span/>')
@@ -376,8 +382,8 @@
 
         };
 
-        var buildDropDownButtonItemList = function () {
-            var items = $('<ul/>')
+        let buildDropDownButtonItemList = function () {
+            let items = $('<ul/>')
                 .attr('id', 'flagstrap-drop-down-' + uniqueId + '-list')
                 .attr('aria-labelled-by', 'flagstrap-drop-down-' + uniqueId)
                 .addClass('dropdown-menu');
@@ -389,22 +395,20 @@
             }
 
             // Populate the bootstrap dropdown item list
-            $(htmlSelect).find('option').each(function () {
+            $(htmlSelect + ' option').each(function () {
 
                 // Get original select option values and labels
-                var text = $(this).text();
-                var value = $(this).val();
+                let text = $(this).text();
+                let value = $(this).val();
+                let flagIcon = null;
 
                 // Build the flag icon
                 if (value !== plugin.settings.placeholder.value) {
-                    var flagIcon = $('<i/>').addClass('flagstrap-icon flagstrap-' + value.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
-                } else {
-                    var flagIcon = null;
+                    flagIcon = $('<i/>').addClass('flagstrap-icon flagstrap-' + value.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
                 }
 
-
                 // Build a clickable drop down option item, insert the flag and label, attach click event
-                var flagStrapItem = $('<a/>')
+                let flagStrapItem = $('<a/>')
                     .attr('data-val', $(this).val())
                     .html(flagIcon)
                     .append(text)
@@ -412,11 +416,12 @@
                         $(htmlSelect).val($(this).data('val'));
                         $(htmlSelect).trigger('change');
                         $('.flagstrap-selected-' + uniqueId).html($(this).html());
+                        $('#flagstrap-drop-down-' + uniqueId + '-list').toggle();
                         e.preventDefault();
                     });
 
                 // Make it a list item
-                var listItem = $('<li/>').prepend(flagStrapItem);
+                let listItem = $('<li/>').prepend(flagStrapItem);
 
                 // Append it to the drop down item list
                 items.append(listItem);
@@ -427,14 +432,14 @@
         };
 
         function generateId(length) {
-            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
+            let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
 
             if (!length) {
                 length = Math.floor(Math.random() * chars.length);
             }
 
-            var str = '';
-            for (var i = 0; i < length; i++) {
+            let str = '';
+            for (let i = 0; i < length; i++) {
                 str += chars[Math.floor(Math.random() * chars.length)];
             }
             return str;
diff --git a/dist/js/jquery.flagstrap.min.js b/dist/js/jquery.flagstrap.min.js
index cc01d67..ad7506c 100644
--- a/dist/js/jquery.flagstrap.min.js
+++ b/dist/js/jquery.flagstrap.min.js
@@ -1,30 +1 @@
-/*
- *  FlagStrap - v1.0
- *  A lightwieght jQuery plugin for creating Bootstrap 3 compatible country select boxes with flags.
- *  http://www.blazeworx.com/flagstrap
- *
- *  Made by Alex Carter
- *  Under MIT License
- */
-!function(a){var e={buttonSize:"btn-md",buttonType:"btn-default",labelMargin:"10px",scrollable:!0,scrollableHeight:"250px",placeholder:{value:"",text:"Please select country"}},n={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia, Plurinational State of",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CO:"Colombia",KM:"Comoros",CG:"Congo",CD:"Congo, the Democratic Republic of the",CK:"Cook Islands",CR:"Costa Rica",CI:"C&ocirc;te d'Ivoire",HR:"Croatia",CU:"Cuba",CW:"Cura&ccedil;ao",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran, Islamic Republic of",IQ:"Iraq",IE:"Ireland",IM:"Isle of Man",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JE:"Jersey",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"Korea, Democratic People's Republic of",KR:"Korea, Republic of",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MK:"Macedonia, the former Yugoslav Republic of",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",ME:"Montenegro",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestinian Territory, Occupied",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"R&eacute;union",RO:"Romania",RU:"Russian Federation",RW:"Rwanda",SH:"Saint Helena, Ascension and Tristan da Cunha",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",MF:"Saint Martin (French part)",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",RS:"Serbia",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SX:"Sint Maarten (Dutch part)",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",SS:"South Sudan",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SZ:"Swaziland",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan, Province of China",TJ:"Tajikistan",TZ:"Tanzania, United Republic of",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela, Bolivarian Republic of",VN:"Viet Nam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe"}
-a.flagStrap=function(t,i,r){function l(a){var e="0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split("")
-a||(a=Math.floor(Math.random()*e.length))
-for(var n="",t=0;t<a;t++)n+=e[Math.floor(Math.random()*e.length)]
-return n}var o=this,s=l(8)
-o.countries={},o.selected={value:null,text:null},o.settings={inputName:"country-"+s}
-var d=a(t),u="flagstrap-"+s,c="#"+u
-o.init=function(){o.countries=n,o.countries=n,o.settings=a.extend({},e,i,d.data()),void 0!==o.settings.countries&&(o.countries=o.settings.countries),void 0!==o.settings.inputId&&(u=o.settings.inputId,c="#"+u),d.addClass("flagstrap").append(g).append(p).append(S),void 0!==o.settings.onSelect&&o.settings.onSelect instanceof Function&&a(c).change(function(e){var n=this
-i.onSelect(a(n).val(),n)}),a(c).hide()}
-var g=function(){var e=a("<select/>").attr("id",u).attr("name",o.settings.inputName)
-return a.each(o.countries,function(n,t){var i={value:n}
-void 0!==o.settings.selectedCountry&&o.settings.selectedCountry===n&&(i={value:n,selected:"selected"},o.selected={value:n,text:t}),e.append(a("<option>",i).text(t))}),o.settings.placeholder!==!1&&e.prepend(a("<option>",{value:o.settings.placeholder.value,text:o.settings.placeholder.text})),e},p=function(){var e=a(c).find("option").first().text(),n=a(c).find("option").first().val()
-if(e=o.selected.text||e,n=o.selected.value||n,n!==o.settings.placeholder.value)var t=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",o.settings.labelMargin)
-else var t=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder")
-var i=a("<span/>").addClass("flagstrap-selected-"+s).html(t).append(e),r=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+s).addClass("btn "+o.settings.buttonType+" "+o.settings.buttonSize+" dropdown-toggle").html(i)
-return a("<span/>").addClass("caret").css("margin-left",o.settings.labelMargin).insertAfter(i),r},S=function(){var e=a("<ul/>").attr("id","flagstrap-drop-down-"+s+"-list").attr("aria-labelled-by","flagstrap-drop-down-"+s).addClass("dropdown-menu")
-return o.settings.scrollable&&e.css("height","auto").css("max-height",o.settings.scrollableHeight).css("overflow-x","hidden"),a(c).find("option").each(function(){var n=a(this).text(),t=a(this).val()
-if(t!==o.settings.placeholder.value)var i=a("<i/>").addClass("flagstrap-icon flagstrap-"+t.toLowerCase()).css("margin-right",o.settings.labelMargin)
-else var i=null
-var r=a("<a/>").attr("data-val",a(this).val()).html(i).append(n).on("click",function(e){a(c).val(a(this).data("val")),a(c).trigger("change"),a(".flagstrap-selected-"+s).html(a(this).html()),e.preventDefault()}),l=a("<li/>").prepend(r)
-e.append(l)}),e}
-o.init()},a.fn.flagStrap=function(e){return this.each(function(n){void 0===a(this).data("flagStrap")&&a(this).data("flagStrap",new a.flagStrap(this,e,n))})}}(jQuery)
+(function(a){let b={inputId:void 0,buttonSize:"btn-md",buttonType:"btn-default",labelMargin:"10px",scrollable:!0,scrollableHeight:"250px",placeholder:{value:"",text:"Please select country"},selectedCountry:""},c={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia, Plurinational State of",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CO:"Colombia",KM:"Comoros",CG:"Congo",CD:"Congo, the Democratic Republic of the",CK:"Cook Islands",CR:"Costa Rica",CI:"C&ocirc;te d'Ivoire",HR:"Croatia",CU:"Cuba",CW:"Cura&ccedil;ao",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran, Islamic Republic of",IQ:"Iraq",IE:"Ireland",IM:"Isle of Man",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JE:"Jersey",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"Korea, Democratic People's Republic of",KR:"Korea, Republic of",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MK:"Macedonia, the former Yugoslav Republic of",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",ME:"Montenegro",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestinian Territory, Occupied",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"R&eacute;union",RO:"Romania",RU:"Russian Federation",RW:"Rwanda",SH:"Saint Helena, Ascension and Tristan da Cunha",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",MF:"Saint Martin (French part)",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",RS:"Serbia",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SX:"Sint Maarten (Dutch part)",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",SS:"South Sudan",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SZ:"Swaziland",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan, Province of China",TJ:"Tajikistan",TZ:"Tanzania, United Republic of",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela, Bolivarian Republic of",VN:"Viet Nam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe"};a.flagStrap=function(d,f){let j=this,k=function(r){let s="0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split("");r||(r=Math.floor(Math.random()*s.length));let t="";for(let u=0;u<r;u++)t+=s[Math.floor(Math.random()*s.length)];return t}(8);j.countries={},j.selected={value:null,text:null},j.settings={inputName:"country-"+k};let l=a(d),m="flagstrap-"+k,n="#"+m;j.init=function(){j.countries=c,j.countries=c,j.settings=a.extend({},b,f,l.data()),void 0!==j.settings.countries&&(j.countries=j.settings.countries),void 0!==j.settings.inputId&&(m=j.settings.inputId,n="#"+m),l.addClass("flagstrap").append(o).append(p).append(q),j.settings.onSelect!==void 0&&j.settings.onSelect instanceof Function&&a(n).change(function(){let s=this;f.onSelect(a(s).val(),s)}),a(n).hide()};let o=function(){let r=a("<select/>").attr("id",m).attr("name",j.settings.inputName);return a.each(j.countries,function(s,t){let u={value:s};void 0!==j.settings.selectedCountry&&j.settings.selectedCountry===s&&(u={value:s,selected:"selected"},j.selected={value:s,text:t}),r.append(a("<option>",u).text(t))}),!1!==j.settings.placeholder&&(r.prepend(a("<option selected>",{value:j.settings.placeholder.value,text:j.settings.placeholder.text})),j.selected={value:j.settings.placeholder.value,text:j.settings.placeholder.text}),r},p=function(){let r=a(n+" option:first-child"),s=r.text(),t=r.val(),u=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");s=j.selected.text||s,t=j.selected.value||t,t!==j.settings.placeholder.value&&(u=a("<i/>").addClass("flagstrap-icon flagstrap-"+t.toLowerCase()).css("margin-right",j.settings.labelMargin));let v=a("<span/>").addClass("flagstrap-selected-"+k).html(u).append(s),w=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+k).addClass("btn "+j.settings.buttonType+" "+j.settings.buttonSize+" dropdown-toggle").on("click",function(){a("#flagstrap-drop-down-"+k+"-list").toggle()}).html(v);return a("<span/>").addClass("caret").css("margin-left",j.settings.labelMargin).insertAfter(v),w},q=function(){let r=a("<ul/>").attr("id","flagstrap-drop-down-"+k+"-list").attr("aria-labelled-by","flagstrap-drop-down-"+k).addClass("dropdown-menu");return j.settings.scrollable&&r.css("height","auto").css("max-height",j.settings.scrollableHeight).css("overflow-x","hidden"),a(n+" option").each(function(){let s=a(this).text(),t=a(this).val(),u=null;t!==j.settings.placeholder.value&&(u=a("<i/>").addClass("flagstrap-icon flagstrap-"+t.toLowerCase()).css("margin-right",j.settings.labelMargin));let v=a("<a/>").attr("data-val",a(this).val()).html(u).append(s).on("click",function(x){a(n).val(a(this).data("val")),a(n).trigger("change"),a(".flagstrap-selected-"+k).html(a(this).html()),a("#flagstrap-drop-down-"+k+"-list").toggle(),x.preventDefault()}),w=a("<li/>").prepend(v);r.append(w)}),r};j.init()},a.fn.flagStrap=function(d){return this.each(function(f){a(this).data("flagStrap")===void 0&&a(this).data("flagStrap",new a.flagStrap(this,d,f))})}})(jQuery);
\ No newline at end of file

From bfc4ba755155e13a75475d36571b64a3a27dbfe4 Mon Sep 17 00:00:00 2001
From: Mads Jensen <knoldesparker@gmail.com>
Date: Mon, 19 Nov 2018 15:47:11 +0100
Subject: [PATCH 03/10] [FEATURE] Added an optional onDomReady() callback, as
 well as mrhewitt's commit (https://github.com/blazeworx/flagstrap/pull/35)

---
 README.md                       | 23 +++++++++++++++--
 dist/js/jquery.flagstrap.js     | 44 ++++++++++++++++++++++++---------
 dist/js/jquery.flagstrap.min.js |  2 +-
 3 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index ad727f1..b4f94b1 100644
--- a/README.md
+++ b/README.md
@@ -90,6 +90,19 @@ This example will create a Flagstrap Dropdown giving the input field the name of
 </script>
 ```
 
+##### Setting value of widget after creation
+You cannot set the value of the widget using the val() method on the underlying select, as this does not notify the plugin of the change.
+
+Passing a string value to the plugin instead of an object will change value of the underlying select and update the UI display. The string passed should be the country code of the country to select.
+
+The example below will take the flagstrap widget created in the example above and change its selected value to the United States.
+
+```html
+<script>
+    $('#flagstrap3').flagStrap('US');
+</script>
+```
+
 ### Options
 <table class="table table-bordered table-striped">
     <thead>
@@ -154,8 +167,14 @@ This example will create a Flagstrap Dropdown giving the input field the name of
         <td>function</td>
         <td>null</td>
         <td>This callback gets called each time the select is changed. It receives two parameters, the new value, and the select element.</td>
-     </tr>
-     <tr>
+    </tr>
+    <tr>
+        <td>onDomReady (optional)</td>
+        <td>function</td>
+        <td>null</td>
+        <td>This callback gets called as the last thing, before the plugin returns, thus multiple selects can be rendered and when they're all done, this is called.</td>
+    </tr>
+    <tr>
         <td>placeholder</td>
         <td>bool|object</td>
         <td>{value: "", text: "Please select a country"}</td>
diff --git a/dist/js/jquery.flagstrap.js b/dist/js/jquery.flagstrap.js
index 8b546d7..954c1e0 100644
--- a/dist/js/jquery.flagstrap.js
+++ b/dist/js/jquery.flagstrap.js
@@ -268,14 +268,13 @@
     };
 
     $.flagStrap = function (element, options, i) {
-
         let plugin = this;
 
         let uniqueId = generateId(8);
 
         plugin.countries = {};
-        plugin.selected = { value: null, text: null };
-        plugin.settings = { inputName: 'country-' + uniqueId };
+        plugin.selected = {value: null, text: null};
+        plugin.settings = {inputName: 'country-' + uniqueId};
 
         let $container = $(element);
         let htmlSelectId = 'flagstrap-' + uniqueId;
@@ -319,15 +318,28 @@
 
         };
 
+        plugin.val = function (country_code) {
+            // set the underlying select to the new value
+            $(htmlSelect).val(country_code);
+            // update the UI of the flag widget to show the new country selection
+            let html = '';
+            if ( country_code === plugin.settings.placeholder.value ) {
+                html = '<i class="flagstrap-icon flagstrap-placeholder"></i> ' + plugin.settings.placeholder.text;
+            } else {
+                html = $container.find('li a[data-val='+country_code+']').html();
+            }
+            $('.flagstrap-selected-' + uniqueId).html( html );
+        };
+
         let buildHtmlSelect = function () {
             let htmlSelectElement = $('<select/>').attr('id', htmlSelectId).attr('name', plugin.settings.inputName);
 
             $.each(plugin.countries, function (code, country) {
-                let optionAttributes = { value: code };
+                let optionAttributes = {value: code};
                 if (plugin.settings.selectedCountry !== undefined) {
                     if (plugin.settings.selectedCountry === code) {
-                        optionAttributes = { value: code, selected: "selected" };
-                        plugin.selected = { value: code, text: country }
+                        optionAttributes = {value: code, selected: "selected"};
+                        plugin.selected = {value: code, text: country}
                     }
                 }
                 htmlSelectElement.append($('<option>', optionAttributes).text(country));
@@ -338,7 +350,7 @@
                     value: plugin.settings.placeholder.value,
                     text: plugin.settings.placeholder.text,
                 }));
-                plugin.selected = { value: plugin.settings.placeholder.value, text: plugin.settings.placeholder.text }
+                plugin.selected = {value: plugin.settings.placeholder.value, text: plugin.settings.placeholder.text}
             }
 
             return htmlSelectElement;
@@ -446,17 +458,27 @@
         }
 
         plugin.init();
-
     };
 
     $.fn.flagStrap = function (options) {
 
-        return this.each(function (i) {
-            if ($(this).data('flagStrap') === undefined) {
-                $(this).data('flagStrap', new $.flagStrap(this, options, i));
+        let res = this.each(function (i) {
+
+            if (typeof options === 'string' && $(this).data('flagStrap') !== undefined) {
+                $(this).data('flagStrap').val(options);
+            }
+            else {
+                if ($(this).data('flagStrap') === undefined) {
+                    $(this).data('flagStrap', new $.flagStrap(this, options, i));
+                }
             }
         });
 
+        if (options.onDomReady !== undefined && options.onDomReady instanceof Function) {
+            options.onDomReady.call(this);
+        }
+
+        return res;
     }
 
 })(jQuery);
diff --git a/dist/js/jquery.flagstrap.min.js b/dist/js/jquery.flagstrap.min.js
index ad7506c..25a7b25 100644
--- a/dist/js/jquery.flagstrap.min.js
+++ b/dist/js/jquery.flagstrap.min.js
@@ -1 +1 @@
-(function(a){let b={inputId:void 0,buttonSize:"btn-md",buttonType:"btn-default",labelMargin:"10px",scrollable:!0,scrollableHeight:"250px",placeholder:{value:"",text:"Please select country"},selectedCountry:""},c={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia, Plurinational State of",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CO:"Colombia",KM:"Comoros",CG:"Congo",CD:"Congo, the Democratic Republic of the",CK:"Cook Islands",CR:"Costa Rica",CI:"C&ocirc;te d'Ivoire",HR:"Croatia",CU:"Cuba",CW:"Cura&ccedil;ao",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran, Islamic Republic of",IQ:"Iraq",IE:"Ireland",IM:"Isle of Man",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JE:"Jersey",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"Korea, Democratic People's Republic of",KR:"Korea, Republic of",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MK:"Macedonia, the former Yugoslav Republic of",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",ME:"Montenegro",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestinian Territory, Occupied",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"R&eacute;union",RO:"Romania",RU:"Russian Federation",RW:"Rwanda",SH:"Saint Helena, Ascension and Tristan da Cunha",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",MF:"Saint Martin (French part)",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",RS:"Serbia",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SX:"Sint Maarten (Dutch part)",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",SS:"South Sudan",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SZ:"Swaziland",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan, Province of China",TJ:"Tajikistan",TZ:"Tanzania, United Republic of",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela, Bolivarian Republic of",VN:"Viet Nam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe"};a.flagStrap=function(d,f){let j=this,k=function(r){let s="0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split("");r||(r=Math.floor(Math.random()*s.length));let t="";for(let u=0;u<r;u++)t+=s[Math.floor(Math.random()*s.length)];return t}(8);j.countries={},j.selected={value:null,text:null},j.settings={inputName:"country-"+k};let l=a(d),m="flagstrap-"+k,n="#"+m;j.init=function(){j.countries=c,j.countries=c,j.settings=a.extend({},b,f,l.data()),void 0!==j.settings.countries&&(j.countries=j.settings.countries),void 0!==j.settings.inputId&&(m=j.settings.inputId,n="#"+m),l.addClass("flagstrap").append(o).append(p).append(q),j.settings.onSelect!==void 0&&j.settings.onSelect instanceof Function&&a(n).change(function(){let s=this;f.onSelect(a(s).val(),s)}),a(n).hide()};let o=function(){let r=a("<select/>").attr("id",m).attr("name",j.settings.inputName);return a.each(j.countries,function(s,t){let u={value:s};void 0!==j.settings.selectedCountry&&j.settings.selectedCountry===s&&(u={value:s,selected:"selected"},j.selected={value:s,text:t}),r.append(a("<option>",u).text(t))}),!1!==j.settings.placeholder&&(r.prepend(a("<option selected>",{value:j.settings.placeholder.value,text:j.settings.placeholder.text})),j.selected={value:j.settings.placeholder.value,text:j.settings.placeholder.text}),r},p=function(){let r=a(n+" option:first-child"),s=r.text(),t=r.val(),u=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");s=j.selected.text||s,t=j.selected.value||t,t!==j.settings.placeholder.value&&(u=a("<i/>").addClass("flagstrap-icon flagstrap-"+t.toLowerCase()).css("margin-right",j.settings.labelMargin));let v=a("<span/>").addClass("flagstrap-selected-"+k).html(u).append(s),w=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+k).addClass("btn "+j.settings.buttonType+" "+j.settings.buttonSize+" dropdown-toggle").on("click",function(){a("#flagstrap-drop-down-"+k+"-list").toggle()}).html(v);return a("<span/>").addClass("caret").css("margin-left",j.settings.labelMargin).insertAfter(v),w},q=function(){let r=a("<ul/>").attr("id","flagstrap-drop-down-"+k+"-list").attr("aria-labelled-by","flagstrap-drop-down-"+k).addClass("dropdown-menu");return j.settings.scrollable&&r.css("height","auto").css("max-height",j.settings.scrollableHeight).css("overflow-x","hidden"),a(n+" option").each(function(){let s=a(this).text(),t=a(this).val(),u=null;t!==j.settings.placeholder.value&&(u=a("<i/>").addClass("flagstrap-icon flagstrap-"+t.toLowerCase()).css("margin-right",j.settings.labelMargin));let v=a("<a/>").attr("data-val",a(this).val()).html(u).append(s).on("click",function(x){a(n).val(a(this).data("val")),a(n).trigger("change"),a(".flagstrap-selected-"+k).html(a(this).html()),a("#flagstrap-drop-down-"+k+"-list").toggle(),x.preventDefault()}),w=a("<li/>").prepend(v);r.append(w)}),r};j.init()},a.fn.flagStrap=function(d){return this.each(function(f){a(this).data("flagStrap")===void 0&&a(this).data("flagStrap",new a.flagStrap(this,d,f))})}})(jQuery);
\ No newline at end of file
+(function(a){let b={inputId:void 0,buttonSize:"btn-md",buttonType:"btn-default",labelMargin:"10px",scrollable:!0,scrollableHeight:"250px",placeholder:{value:"",text:"Please select country"},selectedCountry:""},c={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia, Plurinational State of",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CO:"Colombia",KM:"Comoros",CG:"Congo",CD:"Congo, the Democratic Republic of the",CK:"Cook Islands",CR:"Costa Rica",CI:"C&ocirc;te d'Ivoire",HR:"Croatia",CU:"Cuba",CW:"Cura&ccedil;ao",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran, Islamic Republic of",IQ:"Iraq",IE:"Ireland",IM:"Isle of Man",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JE:"Jersey",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"Korea, Democratic People's Republic of",KR:"Korea, Republic of",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MK:"Macedonia, the former Yugoslav Republic of",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",ME:"Montenegro",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestinian Territory, Occupied",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"R&eacute;union",RO:"Romania",RU:"Russian Federation",RW:"Rwanda",SH:"Saint Helena, Ascension and Tristan da Cunha",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",MF:"Saint Martin (French part)",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",RS:"Serbia",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SX:"Sint Maarten (Dutch part)",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",SS:"South Sudan",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SZ:"Swaziland",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan, Province of China",TJ:"Tajikistan",TZ:"Tanzania, United Republic of",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela, Bolivarian Republic of",VN:"Viet Nam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe"};a.flagStrap=function(d,f){let j=this,k=function(r){let s="0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split("");r||(r=Math.floor(Math.random()*s.length));let t="";for(let u=0;u<r;u++)t+=s[Math.floor(Math.random()*s.length)];return t}(8);j.countries={},j.selected={value:null,text:null},j.settings={inputName:"country-"+k};let l=a(d),m="flagstrap-"+k,n="#"+m;j.init=function(){j.countries=c,j.countries=c,j.settings=a.extend({},b,f,l.data()),void 0!==j.settings.countries&&(j.countries=j.settings.countries),void 0!==j.settings.inputId&&(m=j.settings.inputId,n="#"+m),l.addClass("flagstrap").append(o).append(p).append(q),j.settings.onSelect!==void 0&&j.settings.onSelect instanceof Function&&a(n).change(function(){let s=this;f.onSelect(a(s).val(),s)}),a(n).hide()},j.val=function(r){a(n).val(r);let s="";s=r===j.settings.placeholder.value?"<i class=\"flagstrap-icon flagstrap-placeholder\"></i> "+j.settings.placeholder.text:l.find("li a[data-val="+r+"]").html(),a(".flagstrap-selected-"+k).html(s)};let o=function(){let r=a("<select/>").attr("id",m).attr("name",j.settings.inputName);return a.each(j.countries,function(s,t){let u={value:s};void 0!==j.settings.selectedCountry&&j.settings.selectedCountry===s&&(u={value:s,selected:"selected"},j.selected={value:s,text:t}),r.append(a("<option>",u).text(t))}),!1!==j.settings.placeholder&&(r.prepend(a("<option selected>",{value:j.settings.placeholder.value,text:j.settings.placeholder.text})),j.selected={value:j.settings.placeholder.value,text:j.settings.placeholder.text}),r},p=function(){let r=a(n+" option:first-child"),s=r.text(),t=r.val(),u=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");s=j.selected.text||s,t=j.selected.value||t,t!==j.settings.placeholder.value&&(u=a("<i/>").addClass("flagstrap-icon flagstrap-"+t.toLowerCase()).css("margin-right",j.settings.labelMargin));let v=a("<span/>").addClass("flagstrap-selected-"+k).html(u).append(s),w=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+k).addClass("btn "+j.settings.buttonType+" "+j.settings.buttonSize+" dropdown-toggle").on("click",function(){a("#flagstrap-drop-down-"+k+"-list").toggle()}).html(v);return a("<span/>").addClass("caret").css("margin-left",j.settings.labelMargin).insertAfter(v),w},q=function(){let r=a("<ul/>").attr("id","flagstrap-drop-down-"+k+"-list").attr("aria-labelled-by","flagstrap-drop-down-"+k).addClass("dropdown-menu");return j.settings.scrollable&&r.css("height","auto").css("max-height",j.settings.scrollableHeight).css("overflow-x","hidden"),a(n+" option").each(function(){let s=a(this).text(),t=a(this).val(),u=null;t!==j.settings.placeholder.value&&(u=a("<i/>").addClass("flagstrap-icon flagstrap-"+t.toLowerCase()).css("margin-right",j.settings.labelMargin));let v=a("<a/>").attr("data-val",a(this).val()).html(u).append(s).on("click",function(x){a(n).val(a(this).data("val")),a(n).trigger("change"),a(".flagstrap-selected-"+k).html(a(this).html()),a("#flagstrap-drop-down-"+k+"-list").toggle(),x.preventDefault()}),w=a("<li/>").prepend(v);r.append(w)}),r};j.init()},a.fn.flagStrap=function(d){let f=this.each(function(g){"string"==typeof d&&void 0!==a(this).data("flagStrap")?a(this).data("flagStrap").val(d):void 0===a(this).data("flagStrap")&&a(this).data("flagStrap",new a.flagStrap(this,d,g))});return void 0!==d.onDomReady&&d.onDomReady instanceof Function&&d.onDomReady.call(this),f}})(jQuery);

From 950eeba093cd76b5172fb9bfbe64b1efc4ff1c30 Mon Sep 17 00:00:00 2001
From: Mads Jensen <knoldesparker@gmail.com>
Date: Wed, 12 Dec 2018 12:03:23 +0100
Subject: [PATCH 04/10] [ADD] Added option to make a searchable (by external
 plugin) version of the dropdown.

---
 README.md                       |  37 +++++++++-
 demo/index.html                 |  52 +++++++++++++-
 dist/css/flags.css              |   4 ++
 dist/js/jquery.flagstrap.js     |  78 +++++++++++++++++++--
 dist/js/jquery.flagstrap.min.js |   2 +-
 src/jquery.flagstrap.js         | 120 +++++++++++++++++++++++++++-----
 6 files changed, 268 insertions(+), 25 deletions(-)

diff --git a/README.md b/README.md
index b4f94b1..eef0a35 100644
--- a/README.md
+++ b/README.md
@@ -103,6 +103,28 @@ The example below will take the flagstrap widget created in the example above an
 </script>
 ```
 
+##### Making it searchable
+
+You can probably use any search plugin you like, but here's how you would do it using https://github.com/stidges/jquery-searchable.
+
+```html
+<script>
+    $('#flagstrap4').flagStrap({
+        searchable: true,
+        searchPlaceholder: 'Type to search for countries...',
+        onDomReady: function() {
+            $('#flagstrap4 ul').searchable({
+                selector: 'li',
+                childSelector: 'a',
+                searchField: '#flagstrap4 input:first',
+                searchType: 'default'
+            })
+        }
+    });
+</script>
+```
+
+
 ### Options
 <table class="table table-bordered table-striped">
     <thead>
@@ -156,6 +178,18 @@ The example below will take the flagstrap widget created in the example above an
         <td>"250px"</td>
         <td>`max-height` for the scrollable drop down</td>
     </tr>
+    <tr>
+        <td>searchable</td>
+        <td>boolean</td>
+        <td>false</td>
+        <td>Use an input field along with the button. This field has no search functionality - you'd have to use an actual search plugin like https://github.com/stidges/jquery-searchable</td>
+    </tr>
+    <tr>
+        <td>searchPlaceholder</td>
+        <td>string</td>
+        <td>"Search"</td>
+        <td>Placeholder text in the search input field.</td>
+    </tr>
     <tr>
         <td>countries (optional)</td>
         <td>object</td>
@@ -172,7 +206,7 @@ The example below will take the flagstrap widget created in the example above an
         <td>onDomReady (optional)</td>
         <td>function</td>
         <td>null</td>
-        <td>This callback gets called as the last thing, before the plugin returns, thus multiple selects can be rendered and when they're all done, this is called.</td>
+        <td>This callback gets called as the last thing, before the plugin returns.</td>
     </tr>
     <tr>
         <td>placeholder</td>
@@ -189,3 +223,4 @@ This project was created by Alex Carter. I owe many thanks to the following peop
 
 * [Matthew Machuga](https://github.com/machuga)
 * [TJ Miller](https://github.com/sixlive)
+* [Mads Jensen](https://github.com/sjoller)
diff --git a/demo/index.html b/demo/index.html
index 9382324..534182c 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -294,11 +294,47 @@ <h3>Result</h3>
             </form>
         </div>
     </div>
+    <hr>
+
+    <div class="row">
+        <div class="col-xs-12 col-md-6">
+            <h3>Example
+                <small>Searchable</small>
+            </h3>
+            <pre class="prettyprint lang-js">
+$('#searchable').flagStrap({
+    searchable: true,
+    searchPlaceholder: 'Type to search for countries...',
+    placeholder: false,
+    onDomReady: function() {
+        $('#searchable ul').searchable({
+            selector: 'li',
+            childSelector: 'a',
+            searchField: '#searchable input:first',
+            searchType: 'default'
+        })
+    }
+});
+            </pre>
+        </div>
+        <div class="col-xs-12 col-md-6">
+            <h3>Result</h3>
+
+            <form>
+                <div class="form-group">
+                    <label>Search Country</label>
+                    <div id="searchable"></div>
+                </div>
+            </form>
+        </div>
+    </div>
+
 </div>
 
 <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
-<script src="../dist/js/jquery.flagstrap.js"></script>
+<script src="../dist/js/jquery.flagstrap.min.js"></script>
+<script src="//rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script>
 
 <script>
     $('#basic').flagStrap();
@@ -335,6 +371,20 @@ <h3>Result</h3>
         }
     });
 
+    $('#searchable').flagStrap({
+        searchable: true,
+        searchPlaceholder: 'Type to search for countries...',
+        placeholder: false,
+        onDomReady: function() {
+            $('#searchable ul').searchable({
+                selector: 'li',
+                childSelector: 'a',
+                searchField: '#searchable input:first',
+                searchType: 'default'
+            })
+        }
+    });
+
 </script>
 
 </body>
diff --git a/dist/css/flags.css b/dist/css/flags.css
index 8b7b7d0..ea4002e 100644
--- a/dist/css/flags.css
+++ b/dist/css/flags.css
@@ -16,6 +16,10 @@
   display: none
 }
 
+.flagstrap ul li {
+    cursor: pointer;
+}
+
 .flagstrap-icon.flagstrap-ad {
     background-position: -16px 0
 }
diff --git a/dist/js/jquery.flagstrap.js b/dist/js/jquery.flagstrap.js
index 954c1e0..4f4b25b 100644
--- a/dist/js/jquery.flagstrap.js
+++ b/dist/js/jquery.flagstrap.js
@@ -15,6 +15,8 @@
         labelMargin: "10px",
         scrollable: true,
         scrollableHeight: "250px",
+        searchable: false,
+        searchPlaceholder: 'Search',
         placeholder: {
             value: '',
             text: 'Please select country'
@@ -299,11 +301,20 @@
             }
 
             // Build HTML Select, Construct the drop down button, Assemble the drop down list items element and insert
-            $container
-                .addClass('flagstrap')
-                .append(buildHtmlSelect)
-                .append(buildDropDownButton)
-                .append(buildDropDownButtonItemList);
+            if (plugin.settings.searchable === true) {
+                $container
+                    .addClass('flagstrap')
+                    .append(buildHtmlSelect)
+                    .append(buildSearchDropDown)
+                    .append(buildDropDownButtonItemList);
+            }
+            else {
+                $container
+                    .addClass('flagstrap')
+                    .append(buildHtmlSelect)
+                    .append(buildDropDownButton)
+                    .append(buildDropDownButtonItemList);
+            }
 
             // Check to see if the onSelect callback method is assigned / callable, bind the change event for broadcast
             if (plugin.settings.onSelect !== undefined && plugin.settings.onSelect instanceof Function) {
@@ -394,6 +405,61 @@
 
         };
 
+        let buildSearchDropDown = function () {
+
+            let firstOption = $(htmlSelect + ' option:first-child');
+            let selectedText = firstOption.text();
+            let selectedValue = firstOption.val();
+            let selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-placeholder');
+
+            selectedText = plugin.selected.text || selectedText;
+            selectedValue = plugin.selected.value || selectedValue;
+
+            if (selectedValue !== plugin.settings.placeholder.value) {
+                selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
+            }
+
+            let caret = $('<span/>')
+                .addClass('caret')
+                .css('margin-left', plugin.settings.labelMargin);
+
+            let buttonLabel = $('<span/>')
+                .addClass('flagstrap-selected-' + uniqueId)
+                .html(selectedLabel)
+                .append(selectedText)
+                .append(caret);
+
+            let searchInput = $('<input/>')
+                .attr('type', 'text')
+                .attr('id', 'flagstrap-search-' + uniqueId)
+                .attr('placeholder', plugin.settings.searchPlaceholder)
+                .addClass('form-control')
+                .on('focus', function (e) {
+                    $('#flagstrap-drop-down-' + uniqueId + '-list').show();
+                });
+
+            let button = $('<button/>')
+                .attr('type', 'button')
+                .attr('data-toggle', 'dropdown')
+                .attr('id', 'flagstrap-drop-down-' + uniqueId)
+                .addClass('btn ' + plugin.settings.buttonType + ' ' + plugin.settings.buttonSize + ' dropdown-toggle')
+                .on('click', function (e) {
+                    $('#flagstrap-drop-down-' + uniqueId + '-list').toggle();
+                })
+                .html(buttonLabel);
+
+            let inputGroupBtn = $('<div/>')
+                .addClass('input-group-btn')
+                .append(button);
+
+            let search = $('<div/>')
+                .addClass('input-group')
+                .append(searchInput)
+                .append(inputGroupBtn)
+
+            return search;
+        };
+
         let buildDropDownButtonItemList = function () {
             let items = $('<ul/>')
                 .attr('id', 'flagstrap-drop-down-' + uniqueId + '-list')
@@ -474,7 +540,7 @@
             }
         });
 
-        if (options.onDomReady !== undefined && options.onDomReady instanceof Function) {
+        if (options !== undefined && options.onDomReady !== undefined && options.onDomReady instanceof Function) {
             options.onDomReady.call(this);
         }
 
diff --git a/dist/js/jquery.flagstrap.min.js b/dist/js/jquery.flagstrap.min.js
index 25a7b25..2ccd089 100644
--- a/dist/js/jquery.flagstrap.min.js
+++ b/dist/js/jquery.flagstrap.min.js
@@ -1 +1 @@
-(function(a){let b={inputId:void 0,buttonSize:"btn-md",buttonType:"btn-default",labelMargin:"10px",scrollable:!0,scrollableHeight:"250px",placeholder:{value:"",text:"Please select country"},selectedCountry:""},c={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia, Plurinational State of",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CO:"Colombia",KM:"Comoros",CG:"Congo",CD:"Congo, the Democratic Republic of the",CK:"Cook Islands",CR:"Costa Rica",CI:"C&ocirc;te d'Ivoire",HR:"Croatia",CU:"Cuba",CW:"Cura&ccedil;ao",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran, Islamic Republic of",IQ:"Iraq",IE:"Ireland",IM:"Isle of Man",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JE:"Jersey",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"Korea, Democratic People's Republic of",KR:"Korea, Republic of",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MK:"Macedonia, the former Yugoslav Republic of",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",ME:"Montenegro",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestinian Territory, Occupied",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"R&eacute;union",RO:"Romania",RU:"Russian Federation",RW:"Rwanda",SH:"Saint Helena, Ascension and Tristan da Cunha",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",MF:"Saint Martin (French part)",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",RS:"Serbia",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SX:"Sint Maarten (Dutch part)",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",SS:"South Sudan",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SZ:"Swaziland",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan, Province of China",TJ:"Tajikistan",TZ:"Tanzania, United Republic of",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela, Bolivarian Republic of",VN:"Viet Nam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe"};a.flagStrap=function(d,f){let j=this,k=function(r){let s="0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split("");r||(r=Math.floor(Math.random()*s.length));let t="";for(let u=0;u<r;u++)t+=s[Math.floor(Math.random()*s.length)];return t}(8);j.countries={},j.selected={value:null,text:null},j.settings={inputName:"country-"+k};let l=a(d),m="flagstrap-"+k,n="#"+m;j.init=function(){j.countries=c,j.countries=c,j.settings=a.extend({},b,f,l.data()),void 0!==j.settings.countries&&(j.countries=j.settings.countries),void 0!==j.settings.inputId&&(m=j.settings.inputId,n="#"+m),l.addClass("flagstrap").append(o).append(p).append(q),j.settings.onSelect!==void 0&&j.settings.onSelect instanceof Function&&a(n).change(function(){let s=this;f.onSelect(a(s).val(),s)}),a(n).hide()},j.val=function(r){a(n).val(r);let s="";s=r===j.settings.placeholder.value?"<i class=\"flagstrap-icon flagstrap-placeholder\"></i> "+j.settings.placeholder.text:l.find("li a[data-val="+r+"]").html(),a(".flagstrap-selected-"+k).html(s)};let o=function(){let r=a("<select/>").attr("id",m).attr("name",j.settings.inputName);return a.each(j.countries,function(s,t){let u={value:s};void 0!==j.settings.selectedCountry&&j.settings.selectedCountry===s&&(u={value:s,selected:"selected"},j.selected={value:s,text:t}),r.append(a("<option>",u).text(t))}),!1!==j.settings.placeholder&&(r.prepend(a("<option selected>",{value:j.settings.placeholder.value,text:j.settings.placeholder.text})),j.selected={value:j.settings.placeholder.value,text:j.settings.placeholder.text}),r},p=function(){let r=a(n+" option:first-child"),s=r.text(),t=r.val(),u=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");s=j.selected.text||s,t=j.selected.value||t,t!==j.settings.placeholder.value&&(u=a("<i/>").addClass("flagstrap-icon flagstrap-"+t.toLowerCase()).css("margin-right",j.settings.labelMargin));let v=a("<span/>").addClass("flagstrap-selected-"+k).html(u).append(s),w=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+k).addClass("btn "+j.settings.buttonType+" "+j.settings.buttonSize+" dropdown-toggle").on("click",function(){a("#flagstrap-drop-down-"+k+"-list").toggle()}).html(v);return a("<span/>").addClass("caret").css("margin-left",j.settings.labelMargin).insertAfter(v),w},q=function(){let r=a("<ul/>").attr("id","flagstrap-drop-down-"+k+"-list").attr("aria-labelled-by","flagstrap-drop-down-"+k).addClass("dropdown-menu");return j.settings.scrollable&&r.css("height","auto").css("max-height",j.settings.scrollableHeight).css("overflow-x","hidden"),a(n+" option").each(function(){let s=a(this).text(),t=a(this).val(),u=null;t!==j.settings.placeholder.value&&(u=a("<i/>").addClass("flagstrap-icon flagstrap-"+t.toLowerCase()).css("margin-right",j.settings.labelMargin));let v=a("<a/>").attr("data-val",a(this).val()).html(u).append(s).on("click",function(x){a(n).val(a(this).data("val")),a(n).trigger("change"),a(".flagstrap-selected-"+k).html(a(this).html()),a("#flagstrap-drop-down-"+k+"-list").toggle(),x.preventDefault()}),w=a("<li/>").prepend(v);r.append(w)}),r};j.init()},a.fn.flagStrap=function(d){let f=this.each(function(g){"string"==typeof d&&void 0!==a(this).data("flagStrap")?a(this).data("flagStrap").val(d):void 0===a(this).data("flagStrap")&&a(this).data("flagStrap",new a.flagStrap(this,d,g))});return void 0!==d.onDomReady&&d.onDomReady instanceof Function&&d.onDomReady.call(this),f}})(jQuery);
+(function(a){let b={inputId:void 0,buttonSize:"btn-md",buttonType:"btn-default",labelMargin:"10px",scrollable:!0,scrollableHeight:"250px",searchable:!1,searchPlaceholder:"Search",placeholder:{value:"",text:"Please select country"},selectedCountry:""},c={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia, Plurinational State of",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CO:"Colombia",KM:"Comoros",CG:"Congo",CD:"Congo, the Democratic Republic of the",CK:"Cook Islands",CR:"Costa Rica",CI:"C&ocirc;te d'Ivoire",HR:"Croatia",CU:"Cuba",CW:"Cura&ccedil;ao",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran, Islamic Republic of",IQ:"Iraq",IE:"Ireland",IM:"Isle of Man",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JE:"Jersey",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"Korea, Democratic People's Republic of",KR:"Korea, Republic of",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MK:"Macedonia, the former Yugoslav Republic of",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",ME:"Montenegro",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestinian Territory, Occupied",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"R&eacute;union",RO:"Romania",RU:"Russian Federation",RW:"Rwanda",SH:"Saint Helena, Ascension and Tristan da Cunha",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",MF:"Saint Martin (French part)",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",RS:"Serbia",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SX:"Sint Maarten (Dutch part)",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",SS:"South Sudan",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SZ:"Swaziland",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan, Province of China",TJ:"Tajikistan",TZ:"Tanzania, United Republic of",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela, Bolivarian Republic of",VN:"Viet Nam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe"};a.flagStrap=function(d,f){let j=this,k=function(s){let t="0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split("");s||(s=Math.floor(Math.random()*t.length));let u="";for(let v=0;v<s;v++)u+=t[Math.floor(Math.random()*t.length)];return u}(8);j.countries={},j.selected={value:null,text:null},j.settings={inputName:"country-"+k};let l=a(d),m="flagstrap-"+k,n="#"+m;j.init=function(){j.countries=c,j.countries=c,j.settings=a.extend({},b,f,l.data()),void 0!==j.settings.countries&&(j.countries=j.settings.countries),void 0!==j.settings.inputId&&(m=j.settings.inputId,n="#"+m),!0===j.settings.searchable?l.addClass("flagstrap").append(o).append(q).append(r):l.addClass("flagstrap").append(o).append(p).append(r),j.settings.onSelect!==void 0&&j.settings.onSelect instanceof Function&&a(n).change(function(){let t=this;f.onSelect(a(t).val(),t)}),a(n).hide()},j.val=function(s){a(n).val(s);let t="";t=s===j.settings.placeholder.value?"<i class=\"flagstrap-icon flagstrap-placeholder\"></i> "+j.settings.placeholder.text:l.find("li a[data-val="+s+"]").html(),a(".flagstrap-selected-"+k).html(t)};let o=function(){let s=a("<select/>").attr("id",m).attr("name",j.settings.inputName);return a.each(j.countries,function(t,u){let v={value:t};void 0!==j.settings.selectedCountry&&j.settings.selectedCountry===t&&(v={value:t,selected:"selected"},j.selected={value:t,text:u}),s.append(a("<option>",v).text(u))}),!1!==j.settings.placeholder&&(s.prepend(a("<option selected>",{value:j.settings.placeholder.value,text:j.settings.placeholder.text})),j.selected={value:j.settings.placeholder.value,text:j.settings.placeholder.text}),s},p=function(){let s=a(n+" option:first-child"),t=s.text(),u=s.val(),v=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=j.selected.text||t,u=j.selected.value||u,u!==j.settings.placeholder.value&&(v=a("<i/>").addClass("flagstrap-icon flagstrap-"+u.toLowerCase()).css("margin-right",j.settings.labelMargin));let w=a("<span/>").addClass("flagstrap-selected-"+k).html(v).append(t),x=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+k).addClass("btn "+j.settings.buttonType+" "+j.settings.buttonSize+" dropdown-toggle").on("click",function(){a("#flagstrap-drop-down-"+k+"-list").toggle()}).html(w);return a("<span/>").addClass("caret").css("margin-left",j.settings.labelMargin).insertAfter(w),x},q=function(){let s=a(n+" option:first-child"),t=s.text(),u=s.val(),v=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=j.selected.text||t,u=j.selected.value||u,u!==j.settings.placeholder.value&&(v=a("<i/>").addClass("flagstrap-icon flagstrap-"+u.toLowerCase()).css("margin-right",j.settings.labelMargin));let w=a("<span/>").addClass("caret").css("margin-left",j.settings.labelMargin),x=a("<span/>").addClass("flagstrap-selected-"+k).html(v).append(t).append(w),y=a("<input/>").attr("type","text").attr("id","flagstrap-search-"+k).attr("placeholder",j.settings.searchPlaceholder).addClass("form-control").on("focus",function(){a("#flagstrap-drop-down-"+k+"-list").show()}),z=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+k).addClass("btn "+j.settings.buttonType+" "+j.settings.buttonSize+" dropdown-toggle").on("click",function(){a("#flagstrap-drop-down-"+k+"-list").toggle()}).html(x),A=a("<div/>").addClass("input-group-btn").append(z),B=a("<div/>").addClass("input-group").append(y).append(A);return B},r=function(){let s=a("<ul/>").attr("id","flagstrap-drop-down-"+k+"-list").attr("aria-labelled-by","flagstrap-drop-down-"+k).addClass("dropdown-menu");return j.settings.scrollable&&s.css("height","auto").css("max-height",j.settings.scrollableHeight).css("overflow-x","hidden"),a(n+" option").each(function(){let t=a(this).text(),u=a(this).val(),v=null;u!==j.settings.placeholder.value&&(v=a("<i/>").addClass("flagstrap-icon flagstrap-"+u.toLowerCase()).css("margin-right",j.settings.labelMargin));let w=a("<a/>").attr("data-val",a(this).val()).html(v).append(t).on("click",function(y){a(n).val(a(this).data("val")),a(n).trigger("change"),a(".flagstrap-selected-"+k).html(a(this).html()),a("#flagstrap-drop-down-"+k+"-list").toggle(),y.preventDefault()}),x=a("<li/>").prepend(w);s.append(x)}),s};j.init()},a.fn.flagStrap=function(d){let f=this.each(function(g){"string"==typeof d&&void 0!==a(this).data("flagStrap")?a(this).data("flagStrap").val(d):void 0===a(this).data("flagStrap")&&a(this).data("flagStrap",new a.flagStrap(this,d,g))});return void 0!==d&&void 0!==d.onDomReady&&d.onDomReady instanceof Function&&d.onDomReady.call(this),f}})(jQuery);
diff --git a/src/jquery.flagstrap.js b/src/jquery.flagstrap.js
index 8b546d7..4f4b25b 100644
--- a/src/jquery.flagstrap.js
+++ b/src/jquery.flagstrap.js
@@ -15,6 +15,8 @@
         labelMargin: "10px",
         scrollable: true,
         scrollableHeight: "250px",
+        searchable: false,
+        searchPlaceholder: 'Search',
         placeholder: {
             value: '',
             text: 'Please select country'
@@ -268,14 +270,13 @@
     };
 
     $.flagStrap = function (element, options, i) {
-
         let plugin = this;
 
         let uniqueId = generateId(8);
 
         plugin.countries = {};
-        plugin.selected = { value: null, text: null };
-        plugin.settings = { inputName: 'country-' + uniqueId };
+        plugin.selected = {value: null, text: null};
+        plugin.settings = {inputName: 'country-' + uniqueId};
 
         let $container = $(element);
         let htmlSelectId = 'flagstrap-' + uniqueId;
@@ -300,11 +301,20 @@
             }
 
             // Build HTML Select, Construct the drop down button, Assemble the drop down list items element and insert
-            $container
-                .addClass('flagstrap')
-                .append(buildHtmlSelect)
-                .append(buildDropDownButton)
-                .append(buildDropDownButtonItemList);
+            if (plugin.settings.searchable === true) {
+                $container
+                    .addClass('flagstrap')
+                    .append(buildHtmlSelect)
+                    .append(buildSearchDropDown)
+                    .append(buildDropDownButtonItemList);
+            }
+            else {
+                $container
+                    .addClass('flagstrap')
+                    .append(buildHtmlSelect)
+                    .append(buildDropDownButton)
+                    .append(buildDropDownButtonItemList);
+            }
 
             // Check to see if the onSelect callback method is assigned / callable, bind the change event for broadcast
             if (plugin.settings.onSelect !== undefined && plugin.settings.onSelect instanceof Function) {
@@ -319,15 +329,28 @@
 
         };
 
+        plugin.val = function (country_code) {
+            // set the underlying select to the new value
+            $(htmlSelect).val(country_code);
+            // update the UI of the flag widget to show the new country selection
+            let html = '';
+            if ( country_code === plugin.settings.placeholder.value ) {
+                html = '<i class="flagstrap-icon flagstrap-placeholder"></i> ' + plugin.settings.placeholder.text;
+            } else {
+                html = $container.find('li a[data-val='+country_code+']').html();
+            }
+            $('.flagstrap-selected-' + uniqueId).html( html );
+        };
+
         let buildHtmlSelect = function () {
             let htmlSelectElement = $('<select/>').attr('id', htmlSelectId).attr('name', plugin.settings.inputName);
 
             $.each(plugin.countries, function (code, country) {
-                let optionAttributes = { value: code };
+                let optionAttributes = {value: code};
                 if (plugin.settings.selectedCountry !== undefined) {
                     if (plugin.settings.selectedCountry === code) {
-                        optionAttributes = { value: code, selected: "selected" };
-                        plugin.selected = { value: code, text: country }
+                        optionAttributes = {value: code, selected: "selected"};
+                        plugin.selected = {value: code, text: country}
                     }
                 }
                 htmlSelectElement.append($('<option>', optionAttributes).text(country));
@@ -338,7 +361,7 @@
                     value: plugin.settings.placeholder.value,
                     text: plugin.settings.placeholder.text,
                 }));
-                plugin.selected = { value: plugin.settings.placeholder.value, text: plugin.settings.placeholder.text }
+                plugin.selected = {value: plugin.settings.placeholder.value, text: plugin.settings.placeholder.text}
             }
 
             return htmlSelectElement;
@@ -382,6 +405,61 @@
 
         };
 
+        let buildSearchDropDown = function () {
+
+            let firstOption = $(htmlSelect + ' option:first-child');
+            let selectedText = firstOption.text();
+            let selectedValue = firstOption.val();
+            let selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-placeholder');
+
+            selectedText = plugin.selected.text || selectedText;
+            selectedValue = plugin.selected.value || selectedValue;
+
+            if (selectedValue !== plugin.settings.placeholder.value) {
+                selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
+            }
+
+            let caret = $('<span/>')
+                .addClass('caret')
+                .css('margin-left', plugin.settings.labelMargin);
+
+            let buttonLabel = $('<span/>')
+                .addClass('flagstrap-selected-' + uniqueId)
+                .html(selectedLabel)
+                .append(selectedText)
+                .append(caret);
+
+            let searchInput = $('<input/>')
+                .attr('type', 'text')
+                .attr('id', 'flagstrap-search-' + uniqueId)
+                .attr('placeholder', plugin.settings.searchPlaceholder)
+                .addClass('form-control')
+                .on('focus', function (e) {
+                    $('#flagstrap-drop-down-' + uniqueId + '-list').show();
+                });
+
+            let button = $('<button/>')
+                .attr('type', 'button')
+                .attr('data-toggle', 'dropdown')
+                .attr('id', 'flagstrap-drop-down-' + uniqueId)
+                .addClass('btn ' + plugin.settings.buttonType + ' ' + plugin.settings.buttonSize + ' dropdown-toggle')
+                .on('click', function (e) {
+                    $('#flagstrap-drop-down-' + uniqueId + '-list').toggle();
+                })
+                .html(buttonLabel);
+
+            let inputGroupBtn = $('<div/>')
+                .addClass('input-group-btn')
+                .append(button);
+
+            let search = $('<div/>')
+                .addClass('input-group')
+                .append(searchInput)
+                .append(inputGroupBtn)
+
+            return search;
+        };
+
         let buildDropDownButtonItemList = function () {
             let items = $('<ul/>')
                 .attr('id', 'flagstrap-drop-down-' + uniqueId + '-list')
@@ -446,17 +524,27 @@
         }
 
         plugin.init();
-
     };
 
     $.fn.flagStrap = function (options) {
 
-        return this.each(function (i) {
-            if ($(this).data('flagStrap') === undefined) {
-                $(this).data('flagStrap', new $.flagStrap(this, options, i));
+        let res = this.each(function (i) {
+
+            if (typeof options === 'string' && $(this).data('flagStrap') !== undefined) {
+                $(this).data('flagStrap').val(options);
+            }
+            else {
+                if ($(this).data('flagStrap') === undefined) {
+                    $(this).data('flagStrap', new $.flagStrap(this, options, i));
+                }
             }
         });
 
+        if (options !== undefined && options.onDomReady !== undefined && options.onDomReady instanceof Function) {
+            options.onDomReady.call(this);
+        }
+
+        return res;
     }
 
 })(jQuery);

From 5b6c39dcab77d6b76d91c6b8128513cf343bf9e8 Mon Sep 17 00:00:00 2001
From: Mads Jensen <knoldesparker@gmail.com>
Date: Fri, 26 Apr 2019 16:29:20 +0200
Subject: [PATCH 05/10] [ADD] Added option to turn off autocomplete/fill on the
 search field.

---
 dist/js/jquery.flagstrap.js     | 2 ++
 dist/js/jquery.flagstrap.min.js | 2 +-
 src/jquery.flagstrap.js         | 2 ++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/dist/js/jquery.flagstrap.js b/dist/js/jquery.flagstrap.js
index 4f4b25b..442b693 100644
--- a/dist/js/jquery.flagstrap.js
+++ b/dist/js/jquery.flagstrap.js
@@ -16,6 +16,7 @@
         scrollable: true,
         scrollableHeight: "250px",
         searchable: false,
+        searchAutoComplete: (0|Math.random()*9e6).toString(36), // Yes, a random string - apparently "off" is the worst value to use, to turn off autofill/complete.
         searchPlaceholder: 'Search',
         placeholder: {
             value: '',
@@ -432,6 +433,7 @@
             let searchInput = $('<input/>')
                 .attr('type', 'text')
                 .attr('id', 'flagstrap-search-' + uniqueId)
+                .attr('autocomplete', plugin.settings.searchAutoComplete || 'off')
                 .attr('placeholder', plugin.settings.searchPlaceholder)
                 .addClass('form-control')
                 .on('focus', function (e) {
diff --git a/dist/js/jquery.flagstrap.min.js b/dist/js/jquery.flagstrap.min.js
index 2ccd089..d9df2d9 100644
--- a/dist/js/jquery.flagstrap.min.js
+++ b/dist/js/jquery.flagstrap.min.js
@@ -1 +1 @@
-(function(a){let b={inputId:void 0,buttonSize:"btn-md",buttonType:"btn-default",labelMargin:"10px",scrollable:!0,scrollableHeight:"250px",searchable:!1,searchPlaceholder:"Search",placeholder:{value:"",text:"Please select country"},selectedCountry:""},c={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia, Plurinational State of",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CO:"Colombia",KM:"Comoros",CG:"Congo",CD:"Congo, the Democratic Republic of the",CK:"Cook Islands",CR:"Costa Rica",CI:"C&ocirc;te d'Ivoire",HR:"Croatia",CU:"Cuba",CW:"Cura&ccedil;ao",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran, Islamic Republic of",IQ:"Iraq",IE:"Ireland",IM:"Isle of Man",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JE:"Jersey",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"Korea, Democratic People's Republic of",KR:"Korea, Republic of",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MK:"Macedonia, the former Yugoslav Republic of",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",ME:"Montenegro",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestinian Territory, Occupied",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"R&eacute;union",RO:"Romania",RU:"Russian Federation",RW:"Rwanda",SH:"Saint Helena, Ascension and Tristan da Cunha",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",MF:"Saint Martin (French part)",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",RS:"Serbia",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SX:"Sint Maarten (Dutch part)",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",SS:"South Sudan",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SZ:"Swaziland",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan, Province of China",TJ:"Tajikistan",TZ:"Tanzania, United Republic of",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela, Bolivarian Republic of",VN:"Viet Nam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe"};a.flagStrap=function(d,f){let j=this,k=function(s){let t="0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split("");s||(s=Math.floor(Math.random()*t.length));let u="";for(let v=0;v<s;v++)u+=t[Math.floor(Math.random()*t.length)];return u}(8);j.countries={},j.selected={value:null,text:null},j.settings={inputName:"country-"+k};let l=a(d),m="flagstrap-"+k,n="#"+m;j.init=function(){j.countries=c,j.countries=c,j.settings=a.extend({},b,f,l.data()),void 0!==j.settings.countries&&(j.countries=j.settings.countries),void 0!==j.settings.inputId&&(m=j.settings.inputId,n="#"+m),!0===j.settings.searchable?l.addClass("flagstrap").append(o).append(q).append(r):l.addClass("flagstrap").append(o).append(p).append(r),j.settings.onSelect!==void 0&&j.settings.onSelect instanceof Function&&a(n).change(function(){let t=this;f.onSelect(a(t).val(),t)}),a(n).hide()},j.val=function(s){a(n).val(s);let t="";t=s===j.settings.placeholder.value?"<i class=\"flagstrap-icon flagstrap-placeholder\"></i> "+j.settings.placeholder.text:l.find("li a[data-val="+s+"]").html(),a(".flagstrap-selected-"+k).html(t)};let o=function(){let s=a("<select/>").attr("id",m).attr("name",j.settings.inputName);return a.each(j.countries,function(t,u){let v={value:t};void 0!==j.settings.selectedCountry&&j.settings.selectedCountry===t&&(v={value:t,selected:"selected"},j.selected={value:t,text:u}),s.append(a("<option>",v).text(u))}),!1!==j.settings.placeholder&&(s.prepend(a("<option selected>",{value:j.settings.placeholder.value,text:j.settings.placeholder.text})),j.selected={value:j.settings.placeholder.value,text:j.settings.placeholder.text}),s},p=function(){let s=a(n+" option:first-child"),t=s.text(),u=s.val(),v=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=j.selected.text||t,u=j.selected.value||u,u!==j.settings.placeholder.value&&(v=a("<i/>").addClass("flagstrap-icon flagstrap-"+u.toLowerCase()).css("margin-right",j.settings.labelMargin));let w=a("<span/>").addClass("flagstrap-selected-"+k).html(v).append(t),x=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+k).addClass("btn "+j.settings.buttonType+" "+j.settings.buttonSize+" dropdown-toggle").on("click",function(){a("#flagstrap-drop-down-"+k+"-list").toggle()}).html(w);return a("<span/>").addClass("caret").css("margin-left",j.settings.labelMargin).insertAfter(w),x},q=function(){let s=a(n+" option:first-child"),t=s.text(),u=s.val(),v=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=j.selected.text||t,u=j.selected.value||u,u!==j.settings.placeholder.value&&(v=a("<i/>").addClass("flagstrap-icon flagstrap-"+u.toLowerCase()).css("margin-right",j.settings.labelMargin));let w=a("<span/>").addClass("caret").css("margin-left",j.settings.labelMargin),x=a("<span/>").addClass("flagstrap-selected-"+k).html(v).append(t).append(w),y=a("<input/>").attr("type","text").attr("id","flagstrap-search-"+k).attr("placeholder",j.settings.searchPlaceholder).addClass("form-control").on("focus",function(){a("#flagstrap-drop-down-"+k+"-list").show()}),z=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+k).addClass("btn "+j.settings.buttonType+" "+j.settings.buttonSize+" dropdown-toggle").on("click",function(){a("#flagstrap-drop-down-"+k+"-list").toggle()}).html(x),A=a("<div/>").addClass("input-group-btn").append(z),B=a("<div/>").addClass("input-group").append(y).append(A);return B},r=function(){let s=a("<ul/>").attr("id","flagstrap-drop-down-"+k+"-list").attr("aria-labelled-by","flagstrap-drop-down-"+k).addClass("dropdown-menu");return j.settings.scrollable&&s.css("height","auto").css("max-height",j.settings.scrollableHeight).css("overflow-x","hidden"),a(n+" option").each(function(){let t=a(this).text(),u=a(this).val(),v=null;u!==j.settings.placeholder.value&&(v=a("<i/>").addClass("flagstrap-icon flagstrap-"+u.toLowerCase()).css("margin-right",j.settings.labelMargin));let w=a("<a/>").attr("data-val",a(this).val()).html(v).append(t).on("click",function(y){a(n).val(a(this).data("val")),a(n).trigger("change"),a(".flagstrap-selected-"+k).html(a(this).html()),a("#flagstrap-drop-down-"+k+"-list").toggle(),y.preventDefault()}),x=a("<li/>").prepend(w);s.append(x)}),s};j.init()},a.fn.flagStrap=function(d){let f=this.each(function(g){"string"==typeof d&&void 0!==a(this).data("flagStrap")?a(this).data("flagStrap").val(d):void 0===a(this).data("flagStrap")&&a(this).data("flagStrap",new a.flagStrap(this,d,g))});return void 0!==d&&void 0!==d.onDomReady&&d.onDomReady instanceof Function&&d.onDomReady.call(this),f}})(jQuery);
+!function(a){let e={inputId:void 0,buttonSize:"btn-md",buttonType:"btn-default",labelMargin:"10px",scrollable:!0,scrollableHeight:"250px",searchable:!1,searchAutoComplete:(0|9e6*Math.random()).toString(36),searchPlaceholder:"Search",placeholder:{value:"",text:"Please select country"},selectedCountry:""},t={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia, Plurinational State of",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CO:"Colombia",KM:"Comoros",CG:"Congo",CD:"Congo, the Democratic Republic of the",CK:"Cook Islands",CR:"Costa Rica",CI:"C&ocirc;te d'Ivoire",HR:"Croatia",CU:"Cuba",CW:"Cura&ccedil;ao",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran, Islamic Republic of",IQ:"Iraq",IE:"Ireland",IM:"Isle of Man",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JE:"Jersey",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"Korea, Democratic People's Republic of",KR:"Korea, Republic of",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MK:"Macedonia, the former Yugoslav Republic of",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",ME:"Montenegro",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestinian Territory, Occupied",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"R&eacute;union",RO:"Romania",RU:"Russian Federation",RW:"Rwanda",SH:"Saint Helena, Ascension and Tristan da Cunha",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",MF:"Saint Martin (French part)",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",RS:"Serbia",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SX:"Sint Maarten (Dutch part)",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",SS:"South Sudan",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SZ:"Swaziland",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan, Province of China",TJ:"Tajikistan",TZ:"Tanzania, United Republic of",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela, Bolivarian Republic of",VN:"Viet Nam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe"};a.flagStrap=function(n,i,l){let s=this,r=function(a){let e="0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split("");a||(a=Math.floor(Math.random()*e.length));let t="";for(let n=0;n<a;n++)t+=e[Math.floor(Math.random()*e.length)];return t}(8);s.countries={},s.selected={value:null,text:null},s.settings={inputName:"country-"+r};let o=a(n),d="flagstrap-"+r,u="#"+d;s.init=function(){s.countries=t,s.countries=t,s.settings=a.extend({},e,i,o.data()),void 0!==s.settings.countries&&(s.countries=s.settings.countries),void 0!==s.settings.inputId&&(d=s.settings.inputId,u="#"+d),!0===s.settings.searchable?o.addClass("flagstrap").append(c).append(g).append(h):o.addClass("flagstrap").append(c).append(p).append(h),void 0!==s.settings.onSelect&&s.settings.onSelect instanceof Function&&a(u).change(function(e){i.onSelect(a(this).val(),this)}),a(u).hide()},s.val=function(e){a(u).val(e);let t="";t=e===s.settings.placeholder.value?'<i class="flagstrap-icon flagstrap-placeholder"></i> '+s.settings.placeholder.text:o.find("li a[data-val="+e+"]").html(),a(".flagstrap-selected-"+r).html(t)};let c=function(){let e=a("<select/>").attr("id",d).attr("name",s.settings.inputName);return a.each(s.countries,function(t,n){let i={value:t};void 0!==s.settings.selectedCountry&&s.settings.selectedCountry===t&&(i={value:t,selected:"selected"},s.selected={value:t,text:n}),e.append(a("<option>",i).text(n))}),!1!==s.settings.placeholder&&(e.prepend(a("<option selected>",{value:s.settings.placeholder.value,text:s.settings.placeholder.text})),s.selected={value:s.settings.placeholder.value,text:s.settings.placeholder.text}),e},p=function(){let e=a(u+" option:first-child"),t=e.text(),n=e.val(),i=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=s.selected.text||t,(n=s.selected.value||n)!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<span/>").addClass("flagstrap-selected-"+r).html(i).append(t),o=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+r).addClass("btn "+s.settings.buttonType+" "+s.settings.buttonSize+" dropdown-toggle").on("click",function(e){a("#flagstrap-drop-down-"+r+"-list").toggle()}).html(l);return a("<span/>").addClass("caret").css("margin-left",s.settings.labelMargin).insertAfter(l),o},g=function(){let e=a(u+" option:first-child"),t=e.text(),n=e.val(),i=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=s.selected.text||t,(n=s.selected.value||n)!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<span/>").addClass("caret").css("margin-left",s.settings.labelMargin),o=a("<span/>").addClass("flagstrap-selected-"+r).html(i).append(t).append(l),d=a("<input/>").attr("type","text").attr("id","flagstrap-search-"+r).attr("autocomplete",s.settings.searchAutoComplete||"off").attr("placeholder",s.settings.searchPlaceholder).addClass("form-control").on("focus",function(e){a("#flagstrap-drop-down-"+r+"-list").show()}),c=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+r).addClass("btn "+s.settings.buttonType+" "+s.settings.buttonSize+" dropdown-toggle").on("click",function(e){a("#flagstrap-drop-down-"+r+"-list").toggle()}).html(o),p=a("<div/>").addClass("input-group-btn").append(c);return a("<div/>").addClass("input-group").append(d).append(p)},h=function(){let e=a("<ul/>").attr("id","flagstrap-drop-down-"+r+"-list").attr("aria-labelled-by","flagstrap-drop-down-"+r).addClass("dropdown-menu");return s.settings.scrollable&&e.css("height","auto").css("max-height",s.settings.scrollableHeight).css("overflow-x","hidden"),a(u+" option").each(function(){let t=a(this).text(),n=a(this).val(),i=null;n!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<a/>").attr("data-val",a(this).val()).html(i).append(t).on("click",function(e){a(u).val(a(this).data("val")),a(u).trigger("change"),a(".flagstrap-selected-"+r).html(a(this).html()),a("#flagstrap-drop-down-"+r+"-list").toggle(),e.preventDefault()}),o=a("<li/>").prepend(l);e.append(o)}),e};s.init()},a.fn.flagStrap=function(e){let t=this.each(function(t){"string"==typeof e&&void 0!==a(this).data("flagStrap")?a(this).data("flagStrap").val(e):void 0===a(this).data("flagStrap")&&a(this).data("flagStrap",new a.flagStrap(this,e,t))});return void 0!==e&&void 0!==e.onDomReady&&e.onDomReady instanceof Function&&e.onDomReady.call(this),t}}(jQuery);
diff --git a/src/jquery.flagstrap.js b/src/jquery.flagstrap.js
index 4f4b25b..442b693 100644
--- a/src/jquery.flagstrap.js
+++ b/src/jquery.flagstrap.js
@@ -16,6 +16,7 @@
         scrollable: true,
         scrollableHeight: "250px",
         searchable: false,
+        searchAutoComplete: (0|Math.random()*9e6).toString(36), // Yes, a random string - apparently "off" is the worst value to use, to turn off autofill/complete.
         searchPlaceholder: 'Search',
         placeholder: {
             value: '',
@@ -432,6 +433,7 @@
             let searchInput = $('<input/>')
                 .attr('type', 'text')
                 .attr('id', 'flagstrap-search-' + uniqueId)
+                .attr('autocomplete', plugin.settings.searchAutoComplete || 'off')
                 .attr('placeholder', plugin.settings.searchPlaceholder)
                 .addClass('form-control')
                 .on('focus', function (e) {

From 499b715f7e67c7259a9b10be20a9e855089b036f Mon Sep 17 00:00:00 2001
From: Mads Jensen <knoldesparker@gmail.com>
Date: Tue, 30 Apr 2019 15:07:02 +0200
Subject: [PATCH 06/10] [REFACTOR] Refactored rendered html to use BS flexbox
 and colors, and embedded the search option in the button.

---
 dist/css/flags.css              |  41 ++++++++++++-
 dist/js/jquery.flagstrap.js     | 104 +++++++++++++++++++++-----------
 dist/js/jquery.flagstrap.min.js |   2 +-
 src/jquery.flagstrap.js         | 104 +++++++++++++++++++++-----------
 4 files changed, 179 insertions(+), 72 deletions(-)

diff --git a/dist/css/flags.css b/dist/css/flags.css
index ea4002e..c35d895 100644
--- a/dist/css/flags.css
+++ b/dist/css/flags.css
@@ -16,8 +16,47 @@
   display: none
 }
 
-.flagstrap ul li {
+.flagstrap-dropdown {
+    overflow: hidden;
+}
+
+.flagstrap-search-button {
+    font-size: 1rem;
+    height: 45px;
+}
+
+.flagstrap-list {
+    position: absolute;
+    z-index: 1000;
+    display: none;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    padding: .5rem 0;
+    margin: .125rem 0 0;
+    font-size: 1rem;
+    color: inherit;
+    text-align: left;
+    list-style: none;
+    background-color: var(--white);
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 0, 0, .15);
+    border-radius: .25rem;
+    box-shadow: 0 5px 5px 1px grey;
+}
+
+.flagstrap-list-item {
+    width: 100%;
+    padding: 0 .5rem;
     cursor: pointer;
+    background-color: var(--white);
+}
+
+.flagstrap-list-item:hover {
+    color: var(--white);
+    background-color: var(--blue);
 }
 
 .flagstrap-icon.flagstrap-ad {
diff --git a/dist/js/jquery.flagstrap.js b/dist/js/jquery.flagstrap.js
index 442b693..5ad4a04 100644
--- a/dist/js/jquery.flagstrap.js
+++ b/dist/js/jquery.flagstrap.js
@@ -301,8 +301,8 @@
                 htmlSelect = '#' + htmlSelectId;
             }
 
-            // Build HTML Select, Construct the drop down button, Assemble the drop down list items element and insert
             if (plugin.settings.searchable === true) {
+                // Build HTML Select, Construct the searchable drop down button, Assemble the drop down list items element and insert
                 $container
                     .addClass('flagstrap')
                     .append(buildHtmlSelect)
@@ -310,6 +310,7 @@
                     .append(buildDropDownButtonItemList);
             }
             else {
+                // Build HTML Select, Construct the drop down button, Assemble the drop down list items element and insert
                 $container
                     .addClass('flagstrap')
                     .append(buildHtmlSelect)
@@ -338,9 +339,9 @@
             if ( country_code === plugin.settings.placeholder.value ) {
                 html = '<i class="flagstrap-icon flagstrap-placeholder"></i> ' + plugin.settings.placeholder.text;
             } else {
-                html = $container.find('li a[data-val='+country_code+']').html();
+                html = $container.find('li a[data-val=' + country_code + ']').html();
             }
-            $('.flagstrap-selected-' + uniqueId).html( html );
+            $('#flagstrap-selected-' + uniqueId).html( html );
         };
 
         let buildHtmlSelect = function () {
@@ -350,7 +351,7 @@
                 let optionAttributes = {value: code};
                 if (plugin.settings.selectedCountry !== undefined) {
                     if (plugin.settings.selectedCountry === code) {
-                        optionAttributes = {value: code, selected: "selected"};
+                        optionAttributes = {value: code, selected: 'selected'};
                         plugin.selected = {value: code, text: country}
                     }
                 }
@@ -383,7 +384,7 @@
             }
 
             let buttonLabel = $('<span/>')
-                .addClass('flagstrap-selected-' + uniqueId)
+                .attr('id', 'flagstrap-selected-' + uniqueId)
                 .html(selectedLabel)
                 .append(selectedText);
 
@@ -391,9 +392,9 @@
                 .attr('type', 'button')
                 .attr('data-toggle', 'dropdown')
                 .attr('id', 'flagstrap-drop-down-' + uniqueId)
-                .addClass('btn ' + plugin.settings.buttonType + ' ' + plugin.settings.buttonSize + ' dropdown-toggle')
+                .addClass('btn ' + plugin.settings.buttonType + ' ' + plugin.settings.buttonSize)
                 .on('click', function (e) {
-                    $('#flagstrap-drop-down-' + uniqueId + '-list').toggle();
+                    $('#flagstrap-drop-down-' + uniqueId + '-list').toggleClass('d-flex');
                 })
                 .html(buttonLabel);
 
@@ -420,44 +421,68 @@
                 selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
             }
 
-            let caret = $('<span/>')
-                .addClass('caret')
+            let caret = $('<div/>')
+                .addClass('caret dropdown-toggle')
                 .css('margin-left', plugin.settings.labelMargin);
 
-            let buttonLabel = $('<span/>')
-                .addClass('flagstrap-selected-' + uniqueId)
-                .html(selectedLabel)
-                .append(selectedText)
-                .append(caret);
-
+            // Build (embedded) search field
             let searchInput = $('<input/>')
                 .attr('type', 'text')
                 .attr('id', 'flagstrap-search-' + uniqueId)
-                .attr('autocomplete', plugin.settings.searchAutoComplete || 'off')
+                .attr('autocomplete', plugin.settings.searchAutoComplete)
                 .attr('placeholder', plugin.settings.searchPlaceholder)
-                .addClass('form-control')
-                .on('focus', function (e) {
-                    $('#flagstrap-drop-down-' + uniqueId + '-list').show();
+                .attr('value', selectedText)
+                .addClass('flex-grow-1 form-control hidden ' + plugin.settings.searchClass)
+                .on('focus', function () {
+                    $('#flagstrap-drop-down-' + uniqueId + '-list').addClass('d-flex');
+                })
+                .on('click', function(e) {
+                    e.stopPropagation();
+                })
+                .on('keyup', function(e) {
+                    // escape
+                    if (e.which === 27) {
+                        $('#flagstrap-selected-' + uniqueId).toggleClass('hidden');
+                        $('#flagstrap-search-' + uniqueId).toggleClass('hidden');
+                        $('#flagstrap-drop-down-' + uniqueId + '-list').removeClass('d-flex');
+                    }
                 });
 
+            let buttonLabel = $('<span/>')
+                .attr('id', 'flagstrap-selected-' + uniqueId)
+                .addClass('flex-grow-1')
+                .html(selectedLabel)
+                .append(selectedText);
+
+            let buttonContentWrapper = $('<div/>')
+                .addClass('input-group-sm w-100')
+                // Regular button content
+                .append(buttonLabel)
+                // Embedded search field
+                .append(searchInput);
+
             let button = $('<button/>')
                 .attr('type', 'button')
-                .attr('data-toggle', 'dropdown')
                 .attr('id', 'flagstrap-drop-down-' + uniqueId)
-                .addClass('btn ' + plugin.settings.buttonType + ' ' + plugin.settings.buttonSize + ' dropdown-toggle')
-                .on('click', function (e) {
-                    $('#flagstrap-drop-down-' + uniqueId + '-list').toggle();
+                .addClass('btn ' + plugin.settings.buttonType + ' ' + plugin.settings.buttonSize + ' d-flex justify-content-end flagstrap-search-button')
+                .on('click', function () {
+                    // Toggle shown button content
+                    $('#flagstrap-selected-' + uniqueId).toggleClass('hidden');
+                    // Toggle dropdown
+                    $('#flagstrap-drop-down-' + uniqueId + '-list').toggleClass('d-flex');
+                    // Update search field, toggle visibility and set focus to search field
+                    $('#flagstrap-search-' + uniqueId).val($('#flagstrap-selected-' + uniqueId).text()).toggleClass('hidden').focus();
                 })
-                .html(buttonLabel);
+                .append(buttonContentWrapper)
+                .append(caret);
 
             let inputGroupBtn = $('<div/>')
-                .addClass('input-group-btn')
+                .addClass('input-group-btn w-100')
                 .append(button);
 
             let search = $('<div/>')
                 .addClass('input-group')
-                .append(searchInput)
-                .append(inputGroupBtn)
+                .append(inputGroupBtn);
 
             return search;
         };
@@ -466,12 +491,14 @@
             let items = $('<ul/>')
                 .attr('id', 'flagstrap-drop-down-' + uniqueId + '-list')
                 .attr('aria-labelled-by', 'flagstrap-drop-down-' + uniqueId)
-                .addClass('dropdown-menu');
+                .addClass('flagstrap-list');
 
             if (plugin.settings.scrollable) {
-                items.css('height', 'auto')
-                    .css('max-height', plugin.settings.scrollableHeight)
-                    .css('overflow-x', 'hidden');
+                items.css({
+                    height: 'auto',
+                    maxHeight: plugin.settings.scrollableHeight,
+                    overflowX: 'hidden'
+                });
             }
 
             // Populate the bootstrap dropdown item list
@@ -495,13 +522,20 @@
                     .on('click', function (e) {
                         $(htmlSelect).val($(this).data('val'));
                         $(htmlSelect).trigger('change');
-                        $('.flagstrap-selected-' + uniqueId).html($(this).html());
-                        $('#flagstrap-drop-down-' + uniqueId + '-list').toggle();
-                        e.preventDefault();
+                        $('#flagstrap-selected-' + uniqueId).html($(this).html());
+
+                        if (plugin.settings.searchable === true) {
+                            $('#flagstrap-search-' + uniqueId).toggleClass('hidden').val(text);
+                            $('#flagstrap-selected-' + uniqueId).toggleClass('hidden');
+                        }
+
+                        $('#flagstrap-drop-down-' + uniqueId + '-list').removeClass('d-flex');
                     });
 
                 // Make it a list item
-                let listItem = $('<li/>').prepend(flagStrapItem);
+                let listItem = $('<li/>')
+                    .addClass('flagstrap-list-item')
+                    .prepend(flagStrapItem);
 
                 // Append it to the drop down item list
                 items.append(listItem);
diff --git a/dist/js/jquery.flagstrap.min.js b/dist/js/jquery.flagstrap.min.js
index d9df2d9..fac77a4 100644
--- a/dist/js/jquery.flagstrap.min.js
+++ b/dist/js/jquery.flagstrap.min.js
@@ -1 +1 @@
-!function(a){let e={inputId:void 0,buttonSize:"btn-md",buttonType:"btn-default",labelMargin:"10px",scrollable:!0,scrollableHeight:"250px",searchable:!1,searchAutoComplete:(0|9e6*Math.random()).toString(36),searchPlaceholder:"Search",placeholder:{value:"",text:"Please select country"},selectedCountry:""},t={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia, Plurinational State of",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CO:"Colombia",KM:"Comoros",CG:"Congo",CD:"Congo, the Democratic Republic of the",CK:"Cook Islands",CR:"Costa Rica",CI:"C&ocirc;te d'Ivoire",HR:"Croatia",CU:"Cuba",CW:"Cura&ccedil;ao",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran, Islamic Republic of",IQ:"Iraq",IE:"Ireland",IM:"Isle of Man",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JE:"Jersey",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"Korea, Democratic People's Republic of",KR:"Korea, Republic of",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MK:"Macedonia, the former Yugoslav Republic of",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",ME:"Montenegro",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestinian Territory, Occupied",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"R&eacute;union",RO:"Romania",RU:"Russian Federation",RW:"Rwanda",SH:"Saint Helena, Ascension and Tristan da Cunha",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",MF:"Saint Martin (French part)",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",RS:"Serbia",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SX:"Sint Maarten (Dutch part)",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",SS:"South Sudan",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SZ:"Swaziland",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan, Province of China",TJ:"Tajikistan",TZ:"Tanzania, United Republic of",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela, Bolivarian Republic of",VN:"Viet Nam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe"};a.flagStrap=function(n,i,l){let s=this,r=function(a){let e="0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split("");a||(a=Math.floor(Math.random()*e.length));let t="";for(let n=0;n<a;n++)t+=e[Math.floor(Math.random()*e.length)];return t}(8);s.countries={},s.selected={value:null,text:null},s.settings={inputName:"country-"+r};let o=a(n),d="flagstrap-"+r,u="#"+d;s.init=function(){s.countries=t,s.countries=t,s.settings=a.extend({},e,i,o.data()),void 0!==s.settings.countries&&(s.countries=s.settings.countries),void 0!==s.settings.inputId&&(d=s.settings.inputId,u="#"+d),!0===s.settings.searchable?o.addClass("flagstrap").append(c).append(g).append(h):o.addClass("flagstrap").append(c).append(p).append(h),void 0!==s.settings.onSelect&&s.settings.onSelect instanceof Function&&a(u).change(function(e){i.onSelect(a(this).val(),this)}),a(u).hide()},s.val=function(e){a(u).val(e);let t="";t=e===s.settings.placeholder.value?'<i class="flagstrap-icon flagstrap-placeholder"></i> '+s.settings.placeholder.text:o.find("li a[data-val="+e+"]").html(),a(".flagstrap-selected-"+r).html(t)};let c=function(){let e=a("<select/>").attr("id",d).attr("name",s.settings.inputName);return a.each(s.countries,function(t,n){let i={value:t};void 0!==s.settings.selectedCountry&&s.settings.selectedCountry===t&&(i={value:t,selected:"selected"},s.selected={value:t,text:n}),e.append(a("<option>",i).text(n))}),!1!==s.settings.placeholder&&(e.prepend(a("<option selected>",{value:s.settings.placeholder.value,text:s.settings.placeholder.text})),s.selected={value:s.settings.placeholder.value,text:s.settings.placeholder.text}),e},p=function(){let e=a(u+" option:first-child"),t=e.text(),n=e.val(),i=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=s.selected.text||t,(n=s.selected.value||n)!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<span/>").addClass("flagstrap-selected-"+r).html(i).append(t),o=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+r).addClass("btn "+s.settings.buttonType+" "+s.settings.buttonSize+" dropdown-toggle").on("click",function(e){a("#flagstrap-drop-down-"+r+"-list").toggle()}).html(l);return a("<span/>").addClass("caret").css("margin-left",s.settings.labelMargin).insertAfter(l),o},g=function(){let e=a(u+" option:first-child"),t=e.text(),n=e.val(),i=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=s.selected.text||t,(n=s.selected.value||n)!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<span/>").addClass("caret").css("margin-left",s.settings.labelMargin),o=a("<span/>").addClass("flagstrap-selected-"+r).html(i).append(t).append(l),d=a("<input/>").attr("type","text").attr("id","flagstrap-search-"+r).attr("autocomplete",s.settings.searchAutoComplete||"off").attr("placeholder",s.settings.searchPlaceholder).addClass("form-control").on("focus",function(e){a("#flagstrap-drop-down-"+r+"-list").show()}),c=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+r).addClass("btn "+s.settings.buttonType+" "+s.settings.buttonSize+" dropdown-toggle").on("click",function(e){a("#flagstrap-drop-down-"+r+"-list").toggle()}).html(o),p=a("<div/>").addClass("input-group-btn").append(c);return a("<div/>").addClass("input-group").append(d).append(p)},h=function(){let e=a("<ul/>").attr("id","flagstrap-drop-down-"+r+"-list").attr("aria-labelled-by","flagstrap-drop-down-"+r).addClass("dropdown-menu");return s.settings.scrollable&&e.css("height","auto").css("max-height",s.settings.scrollableHeight).css("overflow-x","hidden"),a(u+" option").each(function(){let t=a(this).text(),n=a(this).val(),i=null;n!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<a/>").attr("data-val",a(this).val()).html(i).append(t).on("click",function(e){a(u).val(a(this).data("val")),a(u).trigger("change"),a(".flagstrap-selected-"+r).html(a(this).html()),a("#flagstrap-drop-down-"+r+"-list").toggle(),e.preventDefault()}),o=a("<li/>").prepend(l);e.append(o)}),e};s.init()},a.fn.flagStrap=function(e){let t=this.each(function(t){"string"==typeof e&&void 0!==a(this).data("flagStrap")?a(this).data("flagStrap").val(e):void 0===a(this).data("flagStrap")&&a(this).data("flagStrap",new a.flagStrap(this,e,t))});return void 0!==e&&void 0!==e.onDomReady&&e.onDomReady instanceof Function&&e.onDomReady.call(this),t}}(jQuery);
+!function(a){let e={inputId:void 0,buttonSize:"btn-md",buttonType:"btn-default",labelMargin:"10px",scrollable:!0,scrollableHeight:"250px",searchable:!1,searchAutoComplete:(0|9e6*Math.random()).toString(36),searchPlaceholder:"Search",placeholder:{value:"",text:"Please select country"},selectedCountry:""},t={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia, Plurinational State of",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CO:"Colombia",KM:"Comoros",CG:"Congo",CD:"Congo, the Democratic Republic of the",CK:"Cook Islands",CR:"Costa Rica",CI:"C&ocirc;te d'Ivoire",HR:"Croatia",CU:"Cuba",CW:"Cura&ccedil;ao",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran, Islamic Republic of",IQ:"Iraq",IE:"Ireland",IM:"Isle of Man",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JE:"Jersey",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"Korea, Democratic People's Republic of",KR:"Korea, Republic of",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MK:"Macedonia, the former Yugoslav Republic of",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",ME:"Montenegro",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestinian Territory, Occupied",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"R&eacute;union",RO:"Romania",RU:"Russian Federation",RW:"Rwanda",SH:"Saint Helena, Ascension and Tristan da Cunha",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",MF:"Saint Martin (French part)",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",RS:"Serbia",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SX:"Sint Maarten (Dutch part)",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",SS:"South Sudan",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SZ:"Swaziland",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan, Province of China",TJ:"Tajikistan",TZ:"Tanzania, United Republic of",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela, Bolivarian Republic of",VN:"Viet Nam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe"};a.flagStrap=function(n,i,l){let s=this,r=function(a){let e="0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split("");a||(a=Math.floor(Math.random()*e.length));let t="";for(let n=0;n<a;n++)t+=e[Math.floor(Math.random()*e.length)];return t}(8);s.countries={},s.selected={value:null,text:null},s.settings={inputName:"country-"+r};let o=a(n),d="flagstrap-"+r,c="#"+d;s.init=function(){s.countries=t,s.countries=t,s.settings=a.extend({},e,i,o.data()),void 0!==s.settings.countries&&(s.countries=s.settings.countries),void 0!==s.settings.inputId&&(d=s.settings.inputId,c="#"+d),!0===s.settings.searchable?o.addClass("flagstrap").append(u).append(g).append(h):o.addClass("flagstrap").append(u).append(p).append(h),void 0!==s.settings.onSelect&&s.settings.onSelect instanceof Function&&a(c).change(function(e){i.onSelect(a(this).val(),this)}),a(c).hide()},s.val=function(e){a(c).val(e);let t="";t=e===s.settings.placeholder.value?'<i class="flagstrap-icon flagstrap-placeholder"></i> '+s.settings.placeholder.text:o.find("li a[data-val="+e+"]").html(),a("#flagstrap-selected-"+r).html(t)};let u=function(){let e=a("<select/>").attr("id",d).attr("name",s.settings.inputName);return a.each(s.countries,function(t,n){let i={value:t};void 0!==s.settings.selectedCountry&&s.settings.selectedCountry===t&&(i={value:t,selected:"selected"},s.selected={value:t,text:n}),e.append(a("<option>",i).text(n))}),!1!==s.settings.placeholder&&(e.prepend(a("<option selected>",{value:s.settings.placeholder.value,text:s.settings.placeholder.text})),s.selected={value:s.settings.placeholder.value,text:s.settings.placeholder.text}),e},p=function(){let e=a(c+" option:first-child"),t=e.text(),n=e.val(),i=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=s.selected.text||t,(n=s.selected.value||n)!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<span/>").attr("id","flagstrap-selected-"+r).html(i).append(t),o=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+r).addClass("btn "+s.settings.buttonType+" "+s.settings.buttonSize).on("click",function(e){a("#flagstrap-drop-down-"+r+"-list").toggleClass("d-flex")}).html(l);return a("<span/>").addClass("caret").css("margin-left",s.settings.labelMargin).insertAfter(l),o},g=function(){let e=a(c+" option:first-child"),t=e.text(),n=e.val(),i=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=s.selected.text||t,(n=s.selected.value||n)!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<div/>").addClass("caret dropdown-toggle").css("margin-left",s.settings.labelMargin),o=a("<input/>").attr("type","text").attr("id","flagstrap-search-"+r).attr("autocomplete",s.settings.searchAutoComplete).attr("placeholder",s.settings.searchPlaceholder).attr("value",t).addClass("flex-grow-1 form-control hidden "+s.settings.searchClass).on("focus",function(){a("#flagstrap-drop-down-"+r+"-list").addClass("d-flex")}).on("click",function(a){a.stopPropagation()}).on("keyup",function(e){27===e.which&&(a("#flagstrap-selected-"+r).toggleClass("hidden"),a("#flagstrap-search-"+r).toggleClass("hidden"),a("#flagstrap-drop-down-"+r+"-list").removeClass("d-flex"))}),d=a("<span/>").attr("id","flagstrap-selected-"+r).addClass("flex-grow-1").html(i).append(t),u=a("<div/>").addClass("input-group-sm w-100").append(d).append(o),p=a("<button/>").attr("type","button").attr("id","flagstrap-drop-down-"+r).addClass("btn "+s.settings.buttonType+" "+s.settings.buttonSize+" d-flex justify-content-end flagstrap-search-button").on("click",function(){a("#flagstrap-selected-"+r).toggleClass("hidden"),a("#flagstrap-drop-down-"+r+"-list").toggleClass("d-flex"),a("#flagstrap-search-"+r).val(a("#flagstrap-selected-"+r).text()).toggleClass("hidden").focus()}).append(u).append(l),g=a("<div/>").addClass("input-group-btn w-100").append(p);return a("<div/>").addClass("input-group").append(g)},h=function(){let e=a("<ul/>").attr("id","flagstrap-drop-down-"+r+"-list").attr("aria-labelled-by","flagstrap-drop-down-"+r).addClass("flagstrap-list");return s.settings.scrollable&&e.css({height:"auto",maxHeight:s.settings.scrollableHeight,overflowX:"hidden"}),a(c+" option").each(function(){let t=a(this).text(),n=a(this).val(),i=null;n!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<a/>").attr("data-val",a(this).val()).html(i).append(t).on("click",function(e){a(c).val(a(this).data("val")),a(c).trigger("change"),a("#flagstrap-selected-"+r).html(a(this).html()),!0===s.settings.searchable&&(a("#flagstrap-search-"+r).toggleClass("hidden").val(t),a("#flagstrap-selected-"+r).toggleClass("hidden")),a("#flagstrap-drop-down-"+r+"-list").removeClass("d-flex")}),o=a("<li/>").addClass("flagstrap-list-item").prepend(l);e.append(o)}),e};s.init()},a.fn.flagStrap=function(e){let t=this.each(function(t){"string"==typeof e&&void 0!==a(this).data("flagStrap")?a(this).data("flagStrap").val(e):void 0===a(this).data("flagStrap")&&a(this).data("flagStrap",new a.flagStrap(this,e,t))});return void 0!==e&&void 0!==e.onDomReady&&e.onDomReady instanceof Function&&e.onDomReady.call(this),t}}(jQuery);
diff --git a/src/jquery.flagstrap.js b/src/jquery.flagstrap.js
index 442b693..5ad4a04 100644
--- a/src/jquery.flagstrap.js
+++ b/src/jquery.flagstrap.js
@@ -301,8 +301,8 @@
                 htmlSelect = '#' + htmlSelectId;
             }
 
-            // Build HTML Select, Construct the drop down button, Assemble the drop down list items element and insert
             if (plugin.settings.searchable === true) {
+                // Build HTML Select, Construct the searchable drop down button, Assemble the drop down list items element and insert
                 $container
                     .addClass('flagstrap')
                     .append(buildHtmlSelect)
@@ -310,6 +310,7 @@
                     .append(buildDropDownButtonItemList);
             }
             else {
+                // Build HTML Select, Construct the drop down button, Assemble the drop down list items element and insert
                 $container
                     .addClass('flagstrap')
                     .append(buildHtmlSelect)
@@ -338,9 +339,9 @@
             if ( country_code === plugin.settings.placeholder.value ) {
                 html = '<i class="flagstrap-icon flagstrap-placeholder"></i> ' + plugin.settings.placeholder.text;
             } else {
-                html = $container.find('li a[data-val='+country_code+']').html();
+                html = $container.find('li a[data-val=' + country_code + ']').html();
             }
-            $('.flagstrap-selected-' + uniqueId).html( html );
+            $('#flagstrap-selected-' + uniqueId).html( html );
         };
 
         let buildHtmlSelect = function () {
@@ -350,7 +351,7 @@
                 let optionAttributes = {value: code};
                 if (plugin.settings.selectedCountry !== undefined) {
                     if (plugin.settings.selectedCountry === code) {
-                        optionAttributes = {value: code, selected: "selected"};
+                        optionAttributes = {value: code, selected: 'selected'};
                         plugin.selected = {value: code, text: country}
                     }
                 }
@@ -383,7 +384,7 @@
             }
 
             let buttonLabel = $('<span/>')
-                .addClass('flagstrap-selected-' + uniqueId)
+                .attr('id', 'flagstrap-selected-' + uniqueId)
                 .html(selectedLabel)
                 .append(selectedText);
 
@@ -391,9 +392,9 @@
                 .attr('type', 'button')
                 .attr('data-toggle', 'dropdown')
                 .attr('id', 'flagstrap-drop-down-' + uniqueId)
-                .addClass('btn ' + plugin.settings.buttonType + ' ' + plugin.settings.buttonSize + ' dropdown-toggle')
+                .addClass('btn ' + plugin.settings.buttonType + ' ' + plugin.settings.buttonSize)
                 .on('click', function (e) {
-                    $('#flagstrap-drop-down-' + uniqueId + '-list').toggle();
+                    $('#flagstrap-drop-down-' + uniqueId + '-list').toggleClass('d-flex');
                 })
                 .html(buttonLabel);
 
@@ -420,44 +421,68 @@
                 selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
             }
 
-            let caret = $('<span/>')
-                .addClass('caret')
+            let caret = $('<div/>')
+                .addClass('caret dropdown-toggle')
                 .css('margin-left', plugin.settings.labelMargin);
 
-            let buttonLabel = $('<span/>')
-                .addClass('flagstrap-selected-' + uniqueId)
-                .html(selectedLabel)
-                .append(selectedText)
-                .append(caret);
-
+            // Build (embedded) search field
             let searchInput = $('<input/>')
                 .attr('type', 'text')
                 .attr('id', 'flagstrap-search-' + uniqueId)
-                .attr('autocomplete', plugin.settings.searchAutoComplete || 'off')
+                .attr('autocomplete', plugin.settings.searchAutoComplete)
                 .attr('placeholder', plugin.settings.searchPlaceholder)
-                .addClass('form-control')
-                .on('focus', function (e) {
-                    $('#flagstrap-drop-down-' + uniqueId + '-list').show();
+                .attr('value', selectedText)
+                .addClass('flex-grow-1 form-control hidden ' + plugin.settings.searchClass)
+                .on('focus', function () {
+                    $('#flagstrap-drop-down-' + uniqueId + '-list').addClass('d-flex');
+                })
+                .on('click', function(e) {
+                    e.stopPropagation();
+                })
+                .on('keyup', function(e) {
+                    // escape
+                    if (e.which === 27) {
+                        $('#flagstrap-selected-' + uniqueId).toggleClass('hidden');
+                        $('#flagstrap-search-' + uniqueId).toggleClass('hidden');
+                        $('#flagstrap-drop-down-' + uniqueId + '-list').removeClass('d-flex');
+                    }
                 });
 
+            let buttonLabel = $('<span/>')
+                .attr('id', 'flagstrap-selected-' + uniqueId)
+                .addClass('flex-grow-1')
+                .html(selectedLabel)
+                .append(selectedText);
+
+            let buttonContentWrapper = $('<div/>')
+                .addClass('input-group-sm w-100')
+                // Regular button content
+                .append(buttonLabel)
+                // Embedded search field
+                .append(searchInput);
+
             let button = $('<button/>')
                 .attr('type', 'button')
-                .attr('data-toggle', 'dropdown')
                 .attr('id', 'flagstrap-drop-down-' + uniqueId)
-                .addClass('btn ' + plugin.settings.buttonType + ' ' + plugin.settings.buttonSize + ' dropdown-toggle')
-                .on('click', function (e) {
-                    $('#flagstrap-drop-down-' + uniqueId + '-list').toggle();
+                .addClass('btn ' + plugin.settings.buttonType + ' ' + plugin.settings.buttonSize + ' d-flex justify-content-end flagstrap-search-button')
+                .on('click', function () {
+                    // Toggle shown button content
+                    $('#flagstrap-selected-' + uniqueId).toggleClass('hidden');
+                    // Toggle dropdown
+                    $('#flagstrap-drop-down-' + uniqueId + '-list').toggleClass('d-flex');
+                    // Update search field, toggle visibility and set focus to search field
+                    $('#flagstrap-search-' + uniqueId).val($('#flagstrap-selected-' + uniqueId).text()).toggleClass('hidden').focus();
                 })
-                .html(buttonLabel);
+                .append(buttonContentWrapper)
+                .append(caret);
 
             let inputGroupBtn = $('<div/>')
-                .addClass('input-group-btn')
+                .addClass('input-group-btn w-100')
                 .append(button);
 
             let search = $('<div/>')
                 .addClass('input-group')
-                .append(searchInput)
-                .append(inputGroupBtn)
+                .append(inputGroupBtn);
 
             return search;
         };
@@ -466,12 +491,14 @@
             let items = $('<ul/>')
                 .attr('id', 'flagstrap-drop-down-' + uniqueId + '-list')
                 .attr('aria-labelled-by', 'flagstrap-drop-down-' + uniqueId)
-                .addClass('dropdown-menu');
+                .addClass('flagstrap-list');
 
             if (plugin.settings.scrollable) {
-                items.css('height', 'auto')
-                    .css('max-height', plugin.settings.scrollableHeight)
-                    .css('overflow-x', 'hidden');
+                items.css({
+                    height: 'auto',
+                    maxHeight: plugin.settings.scrollableHeight,
+                    overflowX: 'hidden'
+                });
             }
 
             // Populate the bootstrap dropdown item list
@@ -495,13 +522,20 @@
                     .on('click', function (e) {
                         $(htmlSelect).val($(this).data('val'));
                         $(htmlSelect).trigger('change');
-                        $('.flagstrap-selected-' + uniqueId).html($(this).html());
-                        $('#flagstrap-drop-down-' + uniqueId + '-list').toggle();
-                        e.preventDefault();
+                        $('#flagstrap-selected-' + uniqueId).html($(this).html());
+
+                        if (plugin.settings.searchable === true) {
+                            $('#flagstrap-search-' + uniqueId).toggleClass('hidden').val(text);
+                            $('#flagstrap-selected-' + uniqueId).toggleClass('hidden');
+                        }
+
+                        $('#flagstrap-drop-down-' + uniqueId + '-list').removeClass('d-flex');
                     });
 
                 // Make it a list item
-                let listItem = $('<li/>').prepend(flagStrapItem);
+                let listItem = $('<li/>')
+                    .addClass('flagstrap-list-item')
+                    .prepend(flagStrapItem);
 
                 // Append it to the drop down item list
                 items.append(listItem);

From 8833c3e7577def206e6ebe59262a2f51b8ac7165 Mon Sep 17 00:00:00 2001
From: Mads Jensen <knoldesparker@gmail.com>
Date: Tue, 30 Apr 2019 15:39:20 +0200
Subject: [PATCH 07/10] [TASK] Updated the readme file.

---
 README.md | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index eef0a35..03bf410 100644
--- a/README.md
+++ b/README.md
@@ -105,13 +105,14 @@ The example below will take the flagstrap widget created in the example above an
 
 ##### Making it searchable
 
-You can probably use any search plugin you like, but here's how you would do it using https://github.com/stidges/jquery-searchable.
+You can probably use any search plugin you like, but here's how you could do it, using https://github.com/stidges/jquery-searchable.
 
 ```html
 <script>
     $('#flagstrap4').flagStrap({
         searchable: true,
         searchPlaceholder: 'Type to search for countries...',
+        searchClass: 'text-light bg-dark',
         onDomReady: function() {
             $('#flagstrap4 ul').searchable({
                 selector: 'li',
@@ -123,6 +124,7 @@ You can probably use any search plugin you like, but here's how you would do it
     });
 </script>
 ```
+Note: The rendered input element already has the ```form-control``` class added.
 
 
 ### Options
@@ -182,13 +184,19 @@ You can probably use any search plugin you like, but here's how you would do it
         <td>searchable</td>
         <td>boolean</td>
         <td>false</td>
-        <td>Use an input field along with the button. This field has no search functionality - you'd have to use an actual search plugin like https://github.com/stidges/jquery-searchable</td>
+        <td>Embed an search input element into the button. This element has no search functionality out of the box - you'd have to use an actual search plugin like https://github.com/stidges/jquery-searchable</td>
     </tr>
     <tr>
         <td>searchPlaceholder</td>
         <td>string</td>
-        <td>"Search"</td>
-        <td>Placeholder text in the search input field.</td>
+        <td>"Search country"</td>
+        <td>Placeholder text in the search input element.</td>
+    </tr>
+    <tr>
+        <td>searchClass</td>
+        <td>string</td>
+        <td>"FancySearchElement"</td>
+        <td>Add one or more classes to the search input element.</td>
     </tr>
     <tr>
         <td>countries (optional)</td>

From 28d477f87cd458df0fce4128f0e81ba793985fef Mon Sep 17 00:00:00 2001
From: Mads Jensen <knoldesparker@gmail.com>
Date: Tue, 30 Apr 2019 15:44:56 +0200
Subject: [PATCH 08/10] [TASK] Minor changes to the readme file.

---
 README.md | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 03bf410..dc9d244 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,9 @@
 # Flagstrap
 
-A lightwieght jQuery plugin for creating Bootstrap 3 compatible country select boxes with flags.
+A lightwieght jQuery plugin for creating Bootstrap 4 compatible country select boxes with flags.
 
 ![Flagstrap Demo](http://blazeworx.com/flagstrap.gif)
 
-### Demo
-http://blazeworx.github.io/flagstrap
-
 ### Usage
 
 #### Basic

From a9d6ad42afd7f78fd9e23b95b072dc89e9421f7a Mon Sep 17 00:00:00 2001
From: Mads Jensen <knoldesparker@gmail.com>
Date: Tue, 30 Apr 2019 17:55:02 +0200
Subject: [PATCH 09/10] [TASK] Fixed demo page to use more up-to-date versions
 of Bootstrap and jQuery. [TASK] Added a bit more to the README.md file.

---
 README.md                       |  18 +-
 demo/index.html                 |  34 ++-
 dist/css/flags.css              |   5 +
 dist/js/jquery.flagstrap.js     | 511 ++++++++++++++++----------------
 dist/js/jquery.flagstrap.min.js |   2 +-
 src/jquery.flagstrap.js         | 511 ++++++++++++++++----------------
 6 files changed, 560 insertions(+), 521 deletions(-)

diff --git a/README.md b/README.md
index dc9d244..b4a4a43 100644
--- a/README.md
+++ b/README.md
@@ -189,6 +189,12 @@ Note: The rendered input element already has the ```form-control``` class added.
         <td>"Search country"</td>
         <td>Placeholder text in the search input element.</td>
     </tr>
+    <tr>
+        <td>searchAutoComplete</td>
+        <td>string</td>
+        <td>Randomly generated string</td>
+        <td>Turns OFF autocomplete by setting the search input element autocomplete property to some random string. This is currently the best option for actually disabling autocomplete on an input element - browser support is sketchy at best.</td>
+    </tr>
     <tr>
         <td>searchClass</td>
         <td>string</td>
@@ -196,19 +202,25 @@ Note: The rendered input element already has the ```form-control``` class added.
         <td>Add one or more classes to the search input element.</td>
     </tr>
     <tr>
-        <td>countries (optional)</td>
+        <td>countries</td>
         <td>object</td>
         <td>(all)</td>
         <td>Only show specific countries<br>Example:<br><br>{"GB": "United Kingdom", "US": "United States"}<br><br>will only show the USA and UK.</td>
     </tr>
     <tr>
-        <td>onSelect (optional)</td>
+        <td>selectedCountry</td>
+        <td>string</td>
+        <td></td>
+        <td>Set (single) selected country. "GB" or "US" ...</td>
+    </tr>
+    <tr>
+        <td>onSelect</td>
         <td>function</td>
         <td>null</td>
         <td>This callback gets called each time the select is changed. It receives two parameters, the new value, and the select element.</td>
     </tr>
     <tr>
-        <td>onDomReady (optional)</td>
+        <td>onDomReady</td>
         <td>function</td>
         <td>null</td>
         <td>This callback gets called as the last thing, before the plugin returns.</td>
diff --git a/demo/index.html b/demo/index.html
index 534182c..4afc85b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -5,9 +5,9 @@
     <title>Flagstrap Demo</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
     <link href="../dist/css/flags.css" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
     <style>
         /* Tomorrow Theme */
         /* Original theme - https://github.com/chriskempson/tomorrow-theme */
@@ -154,15 +154,16 @@
 </head>
 <body onload="prettyPrint()">
 
-<a href="https://github.com/blazeworx/flagstrap">
-    <img style="position: absolute; top: 0; left: 0; border: 0;"
-         src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67"
-         alt="Fork me on GitHub"
-         data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png">
+<a href="https://github.com/sjoller/flagstrap">
+    <img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png">
 </a>
 
 <div class="container" style="margin-top:50px;">
-    <h1>FlagStrap v1.1</h1><a href="https://github.com/blazeworx/flagstrap">View on Github</a>
+    <span class="h1">FlagStrap v1.2</span><br>
+    <a class="h4" href="https://github.com/sjoller/flagstrap">View on Github</a> <small>(Forked from <a href="https://github.com/blazeworx/flagstrap">blazeworx</a>)</small>
+    <p class="mt-3">
+        The plugin now works with Bootstrap 4.x and has an option to add search functionality (See <a href="https://github.com/sjoller/flagstrap#making-it-searchable">README.md</a> or <a href="#search-example">further down</a>).
+    </p>
     <hr>
 
     <div class="row">
@@ -296,6 +297,7 @@ <h3>Result</h3>
     </div>
     <hr>
 
+    <a id="search-example"></a>
     <div class="row">
         <div class="col-xs-12 col-md-6">
             <h3>Example
@@ -303,6 +305,8 @@ <h3>Example
             </h3>
             <pre class="prettyprint lang-js">
 $('#searchable').flagStrap({
+    buttonSize: 'btn-lg',
+    buttonType: 'btn-success',
     searchable: true,
     searchPlaceholder: 'Type to search for countries...',
     placeholder: false,
@@ -321,9 +325,11 @@ <h3>Example
             <h3>Result</h3>
 
             <form>
-                <div class="form-group">
-                    <label>Search Country</label>
-                    <div id="searchable"></div>
+                <div class="form-row">
+                    <div class="form-group col-12">
+                        <label>Search Country</label>
+                        <div id="searchable"></div>
+                    </div>
                 </div>
             </form>
         </div>
@@ -331,8 +337,8 @@ <h3>Result</h3>
 
 </div>
 
-<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
+<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+<script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
 <script src="../dist/js/jquery.flagstrap.min.js"></script>
 <script src="//rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script>
 
@@ -372,6 +378,8 @@ <h3>Result</h3>
     });
 
     $('#searchable').flagStrap({
+        buttonSize: 'btn-lg',
+        buttonType: 'btn-success',
         searchable: true,
         searchPlaceholder: 'Type to search for countries...',
         placeholder: false,
diff --git a/dist/css/flags.css b/dist/css/flags.css
index c35d895..90e372c 100644
--- a/dist/css/flags.css
+++ b/dist/css/flags.css
@@ -1,3 +1,7 @@
+.hidden {
+    display: none;
+}
+
 .flagstrap {
     display: inline-block;
     position: relative;
@@ -23,6 +27,7 @@
 .flagstrap-search-button {
     font-size: 1rem;
     height: 45px;
+    width: 100%;
 }
 
 .flagstrap-list {
diff --git a/dist/js/jquery.flagstrap.js b/dist/js/jquery.flagstrap.js
index 5ad4a04..29181fd 100644
--- a/dist/js/jquery.flagstrap.js
+++ b/dist/js/jquery.flagstrap.js
@@ -1,22 +1,27 @@
 /*
- *  FlagStrap - v1.0
- *  A lightwieght jQuery plugin for creating Bootstrap 3 compatible country select boxes with flags.
- *  http://www.blazeworx.com/flagstrap
+ *  FlagStrap - v1.2
+ *  A lightwieght jQuery plugin for creating Bootstrap 4 compatible country select boxes with flags and option to add custom/3rd party search functionality.
+ *  https://github.com/sjoller/flagstrap
+ *
+ *  Forked from http://www.blazeworx.com/flagstrap
  *
  *  Made by Alex Carter
  *  Under MIT License
+ *
+ *  Extended by Mads Jensen
  */
 (function ($) {
 
     let defaults = {
         inputId: undefined,
-        buttonSize: "btn-md",
-        buttonType: "btn-default",
-        labelMargin: "10px",
+        buttonSize: 'btn-md',
+        buttonType: 'btn-default',
+        labelMargin: '10px',
         scrollable: true,
-        scrollableHeight: "250px",
+        scrollableHeight: '250px',
         searchable: false,
-        searchAutoComplete: (0|Math.random()*9e6).toString(36), // Yes, a random string - apparently "off" is the worst value to use, to turn off autofill/complete.
+        searchAutoComplete: (0|Math.random()*9e6).toString(36), // Yes, a random string - apparently 'off' is the worst value to use, to turn off autofill/complete.
+        searchClass: '',
         searchPlaceholder: 'Search',
         placeholder: {
             value: '',
@@ -26,248 +31,248 @@
     };
 
     let countries = {
-        "AF": "Afghanistan",
-        "AL": "Albania",
-        "DZ": "Algeria",
-        "AS": "American Samoa",
-        "AD": "Andorra",
-        "AO": "Angola",
-        "AI": "Anguilla",
-        "AG": "Antigua and Barbuda",
-        "AR": "Argentina",
-        "AM": "Armenia",
-        "AW": "Aruba",
-        "AU": "Australia",
-        "AT": "Austria",
-        "AZ": "Azerbaijan",
-        "BS": "Bahamas",
-        "BH": "Bahrain",
-        "BD": "Bangladesh",
-        "BB": "Barbados",
-        "BY": "Belarus",
-        "BE": "Belgium",
-        "BZ": "Belize",
-        "BJ": "Benin",
-        "BM": "Bermuda",
-        "BT": "Bhutan",
-        "BO": "Bolivia, Plurinational State of",
-        "BA": "Bosnia and Herzegovina",
-        "BW": "Botswana",
-        "BV": "Bouvet Island",
-        "BR": "Brazil",
-        "IO": "British Indian Ocean Territory",
-        "BN": "Brunei Darussalam",
-        "BG": "Bulgaria",
-        "BF": "Burkina Faso",
-        "BI": "Burundi",
-        "KH": "Cambodia",
-        "CM": "Cameroon",
-        "CA": "Canada",
-        "CV": "Cape Verde",
-        "KY": "Cayman Islands",
-        "CF": "Central African Republic",
-        "TD": "Chad",
-        "CL": "Chile",
-        "CN": "China",
-        "CO": "Colombia",
-        "KM": "Comoros",
-        "CG": "Congo",
-        "CD": "Congo, the Democratic Republic of the",
-        "CK": "Cook Islands",
-        "CR": "Costa Rica",
-        "CI": "C" + "&ocirc;" + "te d'Ivoire",
-        "HR": "Croatia",
-        "CU": "Cuba",
-        "CW": "Cura" + "&ccedil;" + "ao",
-        "CY": "Cyprus",
-        "CZ": "Czech Republic",
-        "DK": "Denmark",
-        "DJ": "Djibouti",
-        "DM": "Dominica",
-        "DO": "Dominican Republic",
-        "EC": "Ecuador",
-        "EG": "Egypt",
-        "SV": "El Salvador",
-        "GQ": "Equatorial Guinea",
-        "ER": "Eritrea",
-        "EE": "Estonia",
-        "ET": "Ethiopia",
-        "FK": "Falkland Islands (Malvinas)",
-        "FO": "Faroe Islands",
-        "FJ": "Fiji",
-        "FI": "Finland",
-        "FR": "France",
-        "GF": "French Guiana",
-        "PF": "French Polynesia",
-        "TF": "French Southern Territories",
-        "GA": "Gabon",
-        "GM": "Gambia",
-        "GE": "Georgia",
-        "DE": "Germany",
-        "GH": "Ghana",
-        "GI": "Gibraltar",
-        "GR": "Greece",
-        "GL": "Greenland",
-        "GD": "Grenada",
-        "GP": "Guadeloupe",
-        "GU": "Guam",
-        "GT": "Guatemala",
-        "GG": "Guernsey",
-        "GN": "Guinea",
-        "GW": "Guinea-Bissau",
-        "GY": "Guyana",
-        "HT": "Haiti",
-        "HM": "Heard Island and McDonald Islands",
-        "VA": "Holy See (Vatican City State)",
-        "HN": "Honduras",
-        "HK": "Hong Kong",
-        "HU": "Hungary",
-        "IS": "Iceland",
-        "IN": "India",
-        "ID": "Indonesia",
-        "IR": "Iran, Islamic Republic of",
-        "IQ": "Iraq",
-        "IE": "Ireland",
-        "IM": "Isle of Man",
-        "IL": "Israel",
-        "IT": "Italy",
-        "JM": "Jamaica",
-        "JP": "Japan",
-        "JE": "Jersey",
-        "JO": "Jordan",
-        "KZ": "Kazakhstan",
-        "KE": "Kenya",
-        "KI": "Kiribati",
-        "KP": "Korea, Democratic People's Republic of",
-        "KR": "Korea, Republic of",
-        "KW": "Kuwait",
-        "KG": "Kyrgyzstan",
-        "LA": "Lao People's Democratic Republic",
-        "LV": "Latvia",
-        "LB": "Lebanon",
-        "LS": "Lesotho",
-        "LR": "Liberia",
-        "LY": "Libya",
-        "LI": "Liechtenstein",
-        "LT": "Lithuania",
-        "LU": "Luxembourg",
-        "MO": "Macao",
-        "MK": "Macedonia, the former Yugoslav Republic of",
-        "MG": "Madagascar",
-        "MW": "Malawi",
-        "MY": "Malaysia",
-        "MV": "Maldives",
-        "ML": "Mali",
-        "MT": "Malta",
-        "MH": "Marshall Islands",
-        "MQ": "Martinique",
-        "MR": "Mauritania",
-        "MU": "Mauritius",
-        "YT": "Mayotte",
-        "MX": "Mexico",
-        "FM": "Micronesia, Federated States of",
-        "MD": "Moldova, Republic of",
-        "MC": "Monaco",
-        "MN": "Mongolia",
-        "ME": "Montenegro",
-        "MS": "Montserrat",
-        "MA": "Morocco",
-        "MZ": "Mozambique",
-        "MM": "Myanmar",
-        "NA": "Namibia",
-        "NR": "Nauru",
-        "NP": "Nepal",
-        "NL": "Netherlands",
-        "NC": "New Caledonia",
-        "NZ": "New Zealand",
-        "NI": "Nicaragua",
-        "NE": "Niger",
-        "NG": "Nigeria",
-        "NU": "Niue",
-        "NF": "Norfolk Island",
-        "MP": "Northern Mariana Islands",
-        "NO": "Norway",
-        "OM": "Oman",
-        "PK": "Pakistan",
-        "PW": "Palau",
-        "PS": "Palestinian Territory, Occupied",
-        "PA": "Panama",
-        "PG": "Papua New Guinea",
-        "PY": "Paraguay",
-        "PE": "Peru",
-        "PH": "Philippines",
-        "PN": "Pitcairn",
-        "PL": "Poland",
-        "PT": "Portugal",
-        "PR": "Puerto Rico",
-        "QA": "Qatar",
-        "RE": "R" + "&eacute;" + "union",
-        "RO": "Romania",
-        "RU": "Russian Federation",
-        "RW": "Rwanda",
-        "SH": "Saint Helena, Ascension and Tristan da Cunha",
-        "KN": "Saint Kitts and Nevis",
-        "LC": "Saint Lucia",
-        "MF": "Saint Martin (French part)",
-        "PM": "Saint Pierre and Miquelon",
-        "VC": "Saint Vincent and the Grenadines",
-        "WS": "Samoa",
-        "SM": "San Marino",
-        "ST": "Sao Tome and Principe",
-        "SA": "Saudi Arabia",
-        "SN": "Senegal",
-        "RS": "Serbia",
-        "SC": "Seychelles",
-        "SL": "Sierra Leone",
-        "SG": "Singapore",
-        "SX": "Sint Maarten (Dutch part)",
-        "SK": "Slovakia",
-        "SI": "Slovenia",
-        "SB": "Solomon Islands",
-        "SO": "Somalia",
-        "ZA": "South Africa",
-        "GS": "South Georgia and the South Sandwich Islands",
-        "SS": "South Sudan",
-        "ES": "Spain",
-        "LK": "Sri Lanka",
-        "SD": "Sudan",
-        "SR": "Suriname",
-        "SZ": "Swaziland",
-        "SE": "Sweden",
-        "CH": "Switzerland",
-        "SY": "Syrian Arab Republic",
-        "TW": "Taiwan, Province of China",
-        "TJ": "Tajikistan",
-        "TZ": "Tanzania, United Republic of",
-        "TH": "Thailand",
-        "TL": "Timor-Leste",
-        "TG": "Togo",
-        "TK": "Tokelau",
-        "TO": "Tonga",
-        "TT": "Trinidad and Tobago",
-        "TN": "Tunisia",
-        "TR": "Turkey",
-        "TM": "Turkmenistan",
-        "TC": "Turks and Caicos Islands",
-        "TV": "Tuvalu",
-        "UG": "Uganda",
-        "UA": "Ukraine",
-        "AE": "United Arab Emirates",
-        "GB": "United Kingdom",
-        "US": "United States",
-        "UM": "United States Minor Outlying Islands",
-        "UY": "Uruguay",
-        "UZ": "Uzbekistan",
-        "VU": "Vanuatu",
-        "VE": "Venezuela, Bolivarian Republic of",
-        "VN": "Viet Nam",
-        "VG": "Virgin Islands, British",
-        "VI": "Virgin Islands, U.S.",
-        "WF": "Wallis and Futuna",
-        "EH": "Western Sahara",
-        "YE": "Yemen",
-        "ZM": "Zambia",
-        "ZW": "Zimbabwe"
+        'AF': 'Afghanistan',
+        'AL': 'Albania',
+        'DZ': 'Algeria',
+        'AS': 'American Samoa',
+        'AD': 'Andorra',
+        'AO': 'Angola',
+        'AI': 'Anguilla',
+        'AG': 'Antigua and Barbuda',
+        'AR': 'Argentina',
+        'AM': 'Armenia',
+        'AW': 'Aruba',
+        'AU': 'Australia',
+        'AT': 'Austria',
+        'AZ': 'Azerbaijan',
+        'BS': 'Bahamas',
+        'BH': 'Bahrain',
+        'BD': 'Bangladesh',
+        'BB': 'Barbados',
+        'BY': 'Belarus',
+        'BE': 'Belgium',
+        'BZ': 'Belize',
+        'BJ': 'Benin',
+        'BM': 'Bermuda',
+        'BT': 'Bhutan',
+        'BO': 'Bolivia, Plurinational State of',
+        'BA': 'Bosnia and Herzegovina',
+        'BW': 'Botswana',
+        'BV': 'Bouvet Island',
+        'BR': 'Brazil',
+        'IO': 'British Indian Ocean Territory',
+        'BN': 'Brunei Darussalam',
+        'BG': 'Bulgaria',
+        'BF': 'Burkina Faso',
+        'BI': 'Burundi',
+        'KH': 'Cambodia',
+        'CM': 'Cameroon',
+        'CA': 'Canada',
+        'CV': 'Cape Verde',
+        'KY': 'Cayman Islands',
+        'CF': 'Central African Republic',
+        'TD': 'Chad',
+        'CL': 'Chile',
+        'CN': 'China',
+        'CO': 'Colombia',
+        'KM': 'Comoros',
+        'CG': 'Congo',
+        'CD': 'Congo, the Democratic Republic of the',
+        'CK': 'Cook Islands',
+        'CR': 'Costa Rica',
+        'CI': 'C&ocirc;te d\'Ivoire',
+        'HR': 'Croatia',
+        'CU': 'Cuba',
+        'CW': 'Cura&ccedil;ao',
+        'CY': 'Cyprus',
+        'CZ': 'Czech Republic',
+        'DK': 'Denmark',
+        'DJ': 'Djibouti',
+        'DM': 'Dominica',
+        'DO': 'Dominican Republic',
+        'EC': 'Ecuador',
+        'EG': 'Egypt',
+        'SV': 'El Salvador',
+        'GQ': 'Equatorial Guinea',
+        'ER': 'Eritrea',
+        'EE': 'Estonia',
+        'ET': 'Ethiopia',
+        'FK': 'Falkland Islands (Malvinas)',
+        'FO': 'Faroe Islands',
+        'FJ': 'Fiji',
+        'FI': 'Finland',
+        'FR': 'France',
+        'GF': 'French Guiana',
+        'PF': 'French Polynesia',
+        'TF': 'French Southern Territories',
+        'GA': 'Gabon',
+        'GM': 'Gambia',
+        'GE': 'Georgia',
+        'DE': 'Germany',
+        'GH': 'Ghana',
+        'GI': 'Gibraltar',
+        'GR': 'Greece',
+        'GL': 'Greenland',
+        'GD': 'Grenada',
+        'GP': 'Guadeloupe',
+        'GU': 'Guam',
+        'GT': 'Guatemala',
+        'GG': 'Guernsey',
+        'GN': 'Guinea',
+        'GW': 'Guinea-Bissau',
+        'GY': 'Guyana',
+        'HT': 'Haiti',
+        'HM': 'Heard Island and McDonald Islands',
+        'VA': 'Holy See (Vatican City State)',
+        'HN': 'Honduras',
+        'HK': 'Hong Kong',
+        'HU': 'Hungary',
+        'IS': 'Iceland',
+        'IN': 'India',
+        'ID': 'Indonesia',
+        'IR': 'Iran, Islamic Republic of',
+        'IQ': 'Iraq',
+        'IE': 'Ireland',
+        'IM': 'Isle of Man',
+        'IL': 'Israel',
+        'IT': 'Italy',
+        'JM': 'Jamaica',
+        'JP': 'Japan',
+        'JE': 'Jersey',
+        'JO': 'Jordan',
+        'KZ': 'Kazakhstan',
+        'KE': 'Kenya',
+        'KI': 'Kiribati',
+        'KP': "Korea, Democratic People's Republic of",
+        'KR': 'Korea, Republic of',
+        'KW': 'Kuwait',
+        'KG': 'Kyrgyzstan',
+        'LA': "Lao People's Democratic Republic",
+        'LV': 'Latvia',
+        'LB': 'Lebanon',
+        'LS': 'Lesotho',
+        'LR': 'Liberia',
+        'LY': 'Libya',
+        'LI': 'Liechtenstein',
+        'LT': 'Lithuania',
+        'LU': 'Luxembourg',
+        'MO': 'Macao',
+        'MK': 'Macedonia, the former Yugoslav Republic of',
+        'MG': 'Madagascar',
+        'MW': 'Malawi',
+        'MY': 'Malaysia',
+        'MV': 'Maldives',
+        'ML': 'Mali',
+        'MT': 'Malta',
+        'MH': 'Marshall Islands',
+        'MQ': 'Martinique',
+        'MR': 'Mauritania',
+        'MU': 'Mauritius',
+        'YT': 'Mayotte',
+        'MX': 'Mexico',
+        'FM': 'Micronesia, Federated States of',
+        'MD': 'Moldova, Republic of',
+        'MC': 'Monaco',
+        'MN': 'Mongolia',
+        'ME': 'Montenegro',
+        'MS': 'Montserrat',
+        'MA': 'Morocco',
+        'MZ': 'Mozambique',
+        'MM': 'Myanmar',
+        'NA': 'Namibia',
+        'NR': 'Nauru',
+        'NP': 'Nepal',
+        'NL': 'Netherlands',
+        'NC': 'New Caledonia',
+        'NZ': 'New Zealand',
+        'NI': 'Nicaragua',
+        'NE': 'Niger',
+        'NG': 'Nigeria',
+        'NU': 'Niue',
+        'NF': 'Norfolk Island',
+        'MP': 'Northern Mariana Islands',
+        'NO': 'Norway',
+        'OM': 'Oman',
+        'PK': 'Pakistan',
+        'PW': 'Palau',
+        'PS': 'Palestinian Territory, Occupied',
+        'PA': 'Panama',
+        'PG': 'Papua New Guinea',
+        'PY': 'Paraguay',
+        'PE': 'Peru',
+        'PH': 'Philippines',
+        'PN': 'Pitcairn',
+        'PL': 'Poland',
+        'PT': 'Portugal',
+        'PR': 'Puerto Rico',
+        'QA': 'Qatar',
+        'RE': 'R&eacute;union',
+        'RO': 'Romania',
+        'RU': 'Russian Federation',
+        'RW': 'Rwanda',
+        'SH': 'Saint Helena, Ascension and Tristan da Cunha',
+        'KN': 'Saint Kitts and Nevis',
+        'LC': 'Saint Lucia',
+        'MF': 'Saint Martin (French part)',
+        'PM': 'Saint Pierre and Miquelon',
+        'VC': 'Saint Vincent and the Grenadines',
+        'WS': 'Samoa',
+        'SM': 'San Marino',
+        'ST': 'Sao Tome and Principe',
+        'SA': 'Saudi Arabia',
+        'SN': 'Senegal',
+        'RS': 'Serbia',
+        'SC': 'Seychelles',
+        'SL': 'Sierra Leone',
+        'SG': 'Singapore',
+        'SX': 'Sint Maarten (Dutch part)',
+        'SK': 'Slovakia',
+        'SI': 'Slovenia',
+        'SB': 'Solomon Islands',
+        'SO': 'Somalia',
+        'ZA': 'South Africa',
+        'GS': 'South Georgia and the South Sandwich Islands',
+        'SS': 'South Sudan',
+        'ES': 'Spain',
+        'LK': 'Sri Lanka',
+        'SD': 'Sudan',
+        'SR': 'Suriname',
+        'SZ': 'Swaziland',
+        'SE': 'Sweden',
+        'CH': 'Switzerland',
+        'SY': 'Syrian Arab Republic',
+        'TW': 'Taiwan, Province of China',
+        'TJ': 'Tajikistan',
+        'TZ': 'Tanzania, United Republic of',
+        'TH': 'Thailand',
+        'TL': 'Timor-Leste',
+        'TG': 'Togo',
+        'TK': 'Tokelau',
+        'TO': 'Tonga',
+        'TT': 'Trinidad and Tobago',
+        'TN': 'Tunisia',
+        'TR': 'Turkey',
+        'TM': 'Turkmenistan',
+        'TC': 'Turks and Caicos Islands',
+        'TV': 'Tuvalu',
+        'UG': 'Uganda',
+        'UA': 'Ukraine',
+        'AE': 'United Arab Emirates',
+        'GB': 'United Kingdom',
+        'US': 'United States',
+        'UM': 'United States Minor Outlying Islands',
+        'UY': 'Uruguay',
+        'UZ': 'Uzbekistan',
+        'VU': 'Vanuatu',
+        'VE': 'Venezuela, Bolivarian Republic of',
+        'VN': 'Viet Nam',
+        'VG': 'Virgin Islands, British',
+        'VI': 'Virgin Islands, U.S.',
+        'WF': 'Wallis and Futuna',
+        'EH': 'Western Sahara',
+        'YE': 'Yemen',
+        'ZM': 'Zambia',
+        'ZW': 'Zimbabwe'
     };
 
     $.flagStrap = function (element, options, i) {
@@ -380,7 +385,9 @@
             selectedValue = plugin.selected.value || selectedValue;
 
             if (selectedValue !== plugin.settings.placeholder.value) {
-                selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
+                selectedLabel = $('<i/>')
+                .addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase())
+                .css('margin-right', plugin.settings.labelMargin);
             }
 
             let buttonLabel = $('<span/>')
@@ -399,7 +406,7 @@
                 .html(buttonLabel);
 
             $('<span/>')
-                .addClass('caret')
+                .addClass('dropdown-toggle caret')
                 .css('margin-left', plugin.settings.labelMargin)
                 .insertAfter(buttonLabel);
 
diff --git a/dist/js/jquery.flagstrap.min.js b/dist/js/jquery.flagstrap.min.js
index fac77a4..48c27ae 100644
--- a/dist/js/jquery.flagstrap.min.js
+++ b/dist/js/jquery.flagstrap.min.js
@@ -1 +1 @@
-!function(a){let e={inputId:void 0,buttonSize:"btn-md",buttonType:"btn-default",labelMargin:"10px",scrollable:!0,scrollableHeight:"250px",searchable:!1,searchAutoComplete:(0|9e6*Math.random()).toString(36),searchPlaceholder:"Search",placeholder:{value:"",text:"Please select country"},selectedCountry:""},t={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia, Plurinational State of",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CO:"Colombia",KM:"Comoros",CG:"Congo",CD:"Congo, the Democratic Republic of the",CK:"Cook Islands",CR:"Costa Rica",CI:"C&ocirc;te d'Ivoire",HR:"Croatia",CU:"Cuba",CW:"Cura&ccedil;ao",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran, Islamic Republic of",IQ:"Iraq",IE:"Ireland",IM:"Isle of Man",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JE:"Jersey",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"Korea, Democratic People's Republic of",KR:"Korea, Republic of",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MK:"Macedonia, the former Yugoslav Republic of",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",ME:"Montenegro",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestinian Territory, Occupied",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"R&eacute;union",RO:"Romania",RU:"Russian Federation",RW:"Rwanda",SH:"Saint Helena, Ascension and Tristan da Cunha",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",MF:"Saint Martin (French part)",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",RS:"Serbia",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SX:"Sint Maarten (Dutch part)",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",SS:"South Sudan",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SZ:"Swaziland",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan, Province of China",TJ:"Tajikistan",TZ:"Tanzania, United Republic of",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela, Bolivarian Republic of",VN:"Viet Nam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe"};a.flagStrap=function(n,i,l){let s=this,r=function(a){let e="0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split("");a||(a=Math.floor(Math.random()*e.length));let t="";for(let n=0;n<a;n++)t+=e[Math.floor(Math.random()*e.length)];return t}(8);s.countries={},s.selected={value:null,text:null},s.settings={inputName:"country-"+r};let o=a(n),d="flagstrap-"+r,c="#"+d;s.init=function(){s.countries=t,s.countries=t,s.settings=a.extend({},e,i,o.data()),void 0!==s.settings.countries&&(s.countries=s.settings.countries),void 0!==s.settings.inputId&&(d=s.settings.inputId,c="#"+d),!0===s.settings.searchable?o.addClass("flagstrap").append(u).append(g).append(h):o.addClass("flagstrap").append(u).append(p).append(h),void 0!==s.settings.onSelect&&s.settings.onSelect instanceof Function&&a(c).change(function(e){i.onSelect(a(this).val(),this)}),a(c).hide()},s.val=function(e){a(c).val(e);let t="";t=e===s.settings.placeholder.value?'<i class="flagstrap-icon flagstrap-placeholder"></i> '+s.settings.placeholder.text:o.find("li a[data-val="+e+"]").html(),a("#flagstrap-selected-"+r).html(t)};let u=function(){let e=a("<select/>").attr("id",d).attr("name",s.settings.inputName);return a.each(s.countries,function(t,n){let i={value:t};void 0!==s.settings.selectedCountry&&s.settings.selectedCountry===t&&(i={value:t,selected:"selected"},s.selected={value:t,text:n}),e.append(a("<option>",i).text(n))}),!1!==s.settings.placeholder&&(e.prepend(a("<option selected>",{value:s.settings.placeholder.value,text:s.settings.placeholder.text})),s.selected={value:s.settings.placeholder.value,text:s.settings.placeholder.text}),e},p=function(){let e=a(c+" option:first-child"),t=e.text(),n=e.val(),i=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=s.selected.text||t,(n=s.selected.value||n)!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<span/>").attr("id","flagstrap-selected-"+r).html(i).append(t),o=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+r).addClass("btn "+s.settings.buttonType+" "+s.settings.buttonSize).on("click",function(e){a("#flagstrap-drop-down-"+r+"-list").toggleClass("d-flex")}).html(l);return a("<span/>").addClass("caret").css("margin-left",s.settings.labelMargin).insertAfter(l),o},g=function(){let e=a(c+" option:first-child"),t=e.text(),n=e.val(),i=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=s.selected.text||t,(n=s.selected.value||n)!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<div/>").addClass("caret dropdown-toggle").css("margin-left",s.settings.labelMargin),o=a("<input/>").attr("type","text").attr("id","flagstrap-search-"+r).attr("autocomplete",s.settings.searchAutoComplete).attr("placeholder",s.settings.searchPlaceholder).attr("value",t).addClass("flex-grow-1 form-control hidden "+s.settings.searchClass).on("focus",function(){a("#flagstrap-drop-down-"+r+"-list").addClass("d-flex")}).on("click",function(a){a.stopPropagation()}).on("keyup",function(e){27===e.which&&(a("#flagstrap-selected-"+r).toggleClass("hidden"),a("#flagstrap-search-"+r).toggleClass("hidden"),a("#flagstrap-drop-down-"+r+"-list").removeClass("d-flex"))}),d=a("<span/>").attr("id","flagstrap-selected-"+r).addClass("flex-grow-1").html(i).append(t),u=a("<div/>").addClass("input-group-sm w-100").append(d).append(o),p=a("<button/>").attr("type","button").attr("id","flagstrap-drop-down-"+r).addClass("btn "+s.settings.buttonType+" "+s.settings.buttonSize+" d-flex justify-content-end flagstrap-search-button").on("click",function(){a("#flagstrap-selected-"+r).toggleClass("hidden"),a("#flagstrap-drop-down-"+r+"-list").toggleClass("d-flex"),a("#flagstrap-search-"+r).val(a("#flagstrap-selected-"+r).text()).toggleClass("hidden").focus()}).append(u).append(l),g=a("<div/>").addClass("input-group-btn w-100").append(p);return a("<div/>").addClass("input-group").append(g)},h=function(){let e=a("<ul/>").attr("id","flagstrap-drop-down-"+r+"-list").attr("aria-labelled-by","flagstrap-drop-down-"+r).addClass("flagstrap-list");return s.settings.scrollable&&e.css({height:"auto",maxHeight:s.settings.scrollableHeight,overflowX:"hidden"}),a(c+" option").each(function(){let t=a(this).text(),n=a(this).val(),i=null;n!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<a/>").attr("data-val",a(this).val()).html(i).append(t).on("click",function(e){a(c).val(a(this).data("val")),a(c).trigger("change"),a("#flagstrap-selected-"+r).html(a(this).html()),!0===s.settings.searchable&&(a("#flagstrap-search-"+r).toggleClass("hidden").val(t),a("#flagstrap-selected-"+r).toggleClass("hidden")),a("#flagstrap-drop-down-"+r+"-list").removeClass("d-flex")}),o=a("<li/>").addClass("flagstrap-list-item").prepend(l);e.append(o)}),e};s.init()},a.fn.flagStrap=function(e){let t=this.each(function(t){"string"==typeof e&&void 0!==a(this).data("flagStrap")?a(this).data("flagStrap").val(e):void 0===a(this).data("flagStrap")&&a(this).data("flagStrap",new a.flagStrap(this,e,t))});return void 0!==e&&void 0!==e.onDomReady&&e.onDomReady instanceof Function&&e.onDomReady.call(this),t}}(jQuery);
+!function(a){let e={inputId:void 0,buttonSize:"btn-md",buttonType:"btn-default",labelMargin:"10px",scrollable:!0,scrollableHeight:"250px",searchable:!1,searchAutoComplete:(0|9e6*Math.random()).toString(36),searchClass:"",searchPlaceholder:"Search",placeholder:{value:"",text:"Please select country"},selectedCountry:""},t={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia, Plurinational State of",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CO:"Colombia",KM:"Comoros",CG:"Congo",CD:"Congo, the Democratic Republic of the",CK:"Cook Islands",CR:"Costa Rica",CI:"C&ocirc;te d'Ivoire",HR:"Croatia",CU:"Cuba",CW:"Cura&ccedil;ao",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran, Islamic Republic of",IQ:"Iraq",IE:"Ireland",IM:"Isle of Man",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JE:"Jersey",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"Korea, Democratic People's Republic of",KR:"Korea, Republic of",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MK:"Macedonia, the former Yugoslav Republic of",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",ME:"Montenegro",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestinian Territory, Occupied",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"R&eacute;union",RO:"Romania",RU:"Russian Federation",RW:"Rwanda",SH:"Saint Helena, Ascension and Tristan da Cunha",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",MF:"Saint Martin (French part)",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",RS:"Serbia",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SX:"Sint Maarten (Dutch part)",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",SS:"South Sudan",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SZ:"Swaziland",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan, Province of China",TJ:"Tajikistan",TZ:"Tanzania, United Republic of",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela, Bolivarian Republic of",VN:"Viet Nam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe"};a.flagStrap=function(n,i,l){let s=this,r=function(a){let e="0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split("");a||(a=Math.floor(Math.random()*e.length));let t="";for(let n=0;n<a;n++)t+=e[Math.floor(Math.random()*e.length)];return t}(8);s.countries={},s.selected={value:null,text:null},s.settings={inputName:"country-"+r};let o=a(n),d="flagstrap-"+r,c="#"+d;s.init=function(){s.countries=t,s.countries=t,s.settings=a.extend({},e,i,o.data()),void 0!==s.settings.countries&&(s.countries=s.settings.countries),void 0!==s.settings.inputId&&(d=s.settings.inputId,c="#"+d),!0===s.settings.searchable?o.addClass("flagstrap").append(u).append(g).append(h):o.addClass("flagstrap").append(u).append(p).append(h),void 0!==s.settings.onSelect&&s.settings.onSelect instanceof Function&&a(c).change(function(e){i.onSelect(a(this).val(),this)}),a(c).hide()},s.val=function(e){a(c).val(e);let t="";t=e===s.settings.placeholder.value?'<i class="flagstrap-icon flagstrap-placeholder"></i> '+s.settings.placeholder.text:o.find("li a[data-val="+e+"]").html(),a("#flagstrap-selected-"+r).html(t)};let u=function(){let e=a("<select/>").attr("id",d).attr("name",s.settings.inputName);return a.each(s.countries,function(t,n){let i={value:t};void 0!==s.settings.selectedCountry&&s.settings.selectedCountry===t&&(i={value:t,selected:"selected"},s.selected={value:t,text:n}),e.append(a("<option>",i).text(n))}),!1!==s.settings.placeholder&&(e.prepend(a("<option selected>",{value:s.settings.placeholder.value,text:s.settings.placeholder.text})),s.selected={value:s.settings.placeholder.value,text:s.settings.placeholder.text}),e},p=function(){let e=a(c+" option:first-child"),t=e.text(),n=e.val(),i=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=s.selected.text||t,(n=s.selected.value||n)!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<span/>").attr("id","flagstrap-selected-"+r).html(i).append(t),o=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+r).addClass("btn "+s.settings.buttonType+" "+s.settings.buttonSize).on("click",function(e){a("#flagstrap-drop-down-"+r+"-list").toggleClass("d-flex")}).html(l);return a("<span/>").addClass("dropdown-toggle caret").css("margin-left",s.settings.labelMargin).insertAfter(l),o},g=function(){let e=a(c+" option:first-child"),t=e.text(),n=e.val(),i=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=s.selected.text||t,(n=s.selected.value||n)!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<div/>").addClass("caret dropdown-toggle").css("margin-left",s.settings.labelMargin),o=a("<input/>").attr("type","text").attr("id","flagstrap-search-"+r).attr("autocomplete",s.settings.searchAutoComplete).attr("placeholder",s.settings.searchPlaceholder).attr("value",t).addClass("flex-grow-1 form-control hidden "+s.settings.searchClass).on("focus",function(){a("#flagstrap-drop-down-"+r+"-list").addClass("d-flex")}).on("click",function(a){a.stopPropagation()}).on("keyup",function(e){27===e.which&&(a("#flagstrap-selected-"+r).toggleClass("hidden"),a("#flagstrap-search-"+r).toggleClass("hidden"),a("#flagstrap-drop-down-"+r+"-list").removeClass("d-flex"))}),d=a("<span/>").attr("id","flagstrap-selected-"+r).addClass("flex-grow-1").html(i).append(t),u=a("<div/>").addClass("input-group-sm w-100").append(d).append(o),p=a("<button/>").attr("type","button").attr("id","flagstrap-drop-down-"+r).addClass("btn "+s.settings.buttonType+" "+s.settings.buttonSize+" d-flex justify-content-end flagstrap-search-button").on("click",function(){a("#flagstrap-selected-"+r).toggleClass("hidden"),a("#flagstrap-drop-down-"+r+"-list").toggleClass("d-flex"),a("#flagstrap-search-"+r).val(a("#flagstrap-selected-"+r).text()).toggleClass("hidden").focus()}).append(u).append(l),g=a("<div/>").addClass("input-group-btn w-100").append(p);return a("<div/>").addClass("input-group").append(g)},h=function(){let e=a("<ul/>").attr("id","flagstrap-drop-down-"+r+"-list").attr("aria-labelled-by","flagstrap-drop-down-"+r).addClass("flagstrap-list");return s.settings.scrollable&&e.css({height:"auto",maxHeight:s.settings.scrollableHeight,overflowX:"hidden"}),a(c+" option").each(function(){let t=a(this).text(),n=a(this).val(),i=null;n!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<a/>").attr("data-val",a(this).val()).html(i).append(t).on("click",function(e){a(c).val(a(this).data("val")),a(c).trigger("change"),a("#flagstrap-selected-"+r).html(a(this).html()),!0===s.settings.searchable&&(a("#flagstrap-search-"+r).toggleClass("hidden").val(t),a("#flagstrap-selected-"+r).toggleClass("hidden")),a("#flagstrap-drop-down-"+r+"-list").removeClass("d-flex")}),o=a("<li/>").addClass("flagstrap-list-item").prepend(l);e.append(o)}),e};s.init()},a.fn.flagStrap=function(e){let t=this.each(function(t){"string"==typeof e&&void 0!==a(this).data("flagStrap")?a(this).data("flagStrap").val(e):void 0===a(this).data("flagStrap")&&a(this).data("flagStrap",new a.flagStrap(this,e,t))});return void 0!==e&&void 0!==e.onDomReady&&e.onDomReady instanceof Function&&e.onDomReady.call(this),t}}(jQuery);
diff --git a/src/jquery.flagstrap.js b/src/jquery.flagstrap.js
index 5ad4a04..9ad165a 100644
--- a/src/jquery.flagstrap.js
+++ b/src/jquery.flagstrap.js
@@ -1,22 +1,27 @@
 /*
- *  FlagStrap - v1.0
- *  A lightwieght jQuery plugin for creating Bootstrap 3 compatible country select boxes with flags.
- *  http://www.blazeworx.com/flagstrap
+ *  FlagStrap - v1.2
+ *  A lightwieght jQuery plugin for creating Bootstrap 4 compatible country select boxes with flags and option to add custom/3rd party search functionality.
+ *  https://github.com/sjoller/flagstrap
+ *
+ *  Forked from http://www.blazeworx.com/flagstrap
  *
  *  Made by Alex Carter
  *  Under MIT License
+ *
+ *  Extended by Mads Jensen
  */
 (function ($) {
 
     let defaults = {
         inputId: undefined,
-        buttonSize: "btn-md",
-        buttonType: "btn-default",
-        labelMargin: "10px",
+        buttonSize: 'btn-md',
+        buttonType: 'btn-default',
+        labelMargin: '10px',
         scrollable: true,
-        scrollableHeight: "250px",
+        scrollableHeight: '250px',
         searchable: false,
-        searchAutoComplete: (0|Math.random()*9e6).toString(36), // Yes, a random string - apparently "off" is the worst value to use, to turn off autofill/complete.
+        searchAutoComplete: (0|Math.random()*9e6).toString(36), // Yes, a random string - apparently 'off' is the worst value to use, to turn off autofill/complete.
+        searchClass: '',
         searchPlaceholder: 'Search',
         placeholder: {
             value: '',
@@ -26,248 +31,248 @@
     };
 
     let countries = {
-        "AF": "Afghanistan",
-        "AL": "Albania",
-        "DZ": "Algeria",
-        "AS": "American Samoa",
-        "AD": "Andorra",
-        "AO": "Angola",
-        "AI": "Anguilla",
-        "AG": "Antigua and Barbuda",
-        "AR": "Argentina",
-        "AM": "Armenia",
-        "AW": "Aruba",
-        "AU": "Australia",
-        "AT": "Austria",
-        "AZ": "Azerbaijan",
-        "BS": "Bahamas",
-        "BH": "Bahrain",
-        "BD": "Bangladesh",
-        "BB": "Barbados",
-        "BY": "Belarus",
-        "BE": "Belgium",
-        "BZ": "Belize",
-        "BJ": "Benin",
-        "BM": "Bermuda",
-        "BT": "Bhutan",
-        "BO": "Bolivia, Plurinational State of",
-        "BA": "Bosnia and Herzegovina",
-        "BW": "Botswana",
-        "BV": "Bouvet Island",
-        "BR": "Brazil",
-        "IO": "British Indian Ocean Territory",
-        "BN": "Brunei Darussalam",
-        "BG": "Bulgaria",
-        "BF": "Burkina Faso",
-        "BI": "Burundi",
-        "KH": "Cambodia",
-        "CM": "Cameroon",
-        "CA": "Canada",
-        "CV": "Cape Verde",
-        "KY": "Cayman Islands",
-        "CF": "Central African Republic",
-        "TD": "Chad",
-        "CL": "Chile",
-        "CN": "China",
-        "CO": "Colombia",
-        "KM": "Comoros",
-        "CG": "Congo",
-        "CD": "Congo, the Democratic Republic of the",
-        "CK": "Cook Islands",
-        "CR": "Costa Rica",
-        "CI": "C" + "&ocirc;" + "te d'Ivoire",
-        "HR": "Croatia",
-        "CU": "Cuba",
-        "CW": "Cura" + "&ccedil;" + "ao",
-        "CY": "Cyprus",
-        "CZ": "Czech Republic",
-        "DK": "Denmark",
-        "DJ": "Djibouti",
-        "DM": "Dominica",
-        "DO": "Dominican Republic",
-        "EC": "Ecuador",
-        "EG": "Egypt",
-        "SV": "El Salvador",
-        "GQ": "Equatorial Guinea",
-        "ER": "Eritrea",
-        "EE": "Estonia",
-        "ET": "Ethiopia",
-        "FK": "Falkland Islands (Malvinas)",
-        "FO": "Faroe Islands",
-        "FJ": "Fiji",
-        "FI": "Finland",
-        "FR": "France",
-        "GF": "French Guiana",
-        "PF": "French Polynesia",
-        "TF": "French Southern Territories",
-        "GA": "Gabon",
-        "GM": "Gambia",
-        "GE": "Georgia",
-        "DE": "Germany",
-        "GH": "Ghana",
-        "GI": "Gibraltar",
-        "GR": "Greece",
-        "GL": "Greenland",
-        "GD": "Grenada",
-        "GP": "Guadeloupe",
-        "GU": "Guam",
-        "GT": "Guatemala",
-        "GG": "Guernsey",
-        "GN": "Guinea",
-        "GW": "Guinea-Bissau",
-        "GY": "Guyana",
-        "HT": "Haiti",
-        "HM": "Heard Island and McDonald Islands",
-        "VA": "Holy See (Vatican City State)",
-        "HN": "Honduras",
-        "HK": "Hong Kong",
-        "HU": "Hungary",
-        "IS": "Iceland",
-        "IN": "India",
-        "ID": "Indonesia",
-        "IR": "Iran, Islamic Republic of",
-        "IQ": "Iraq",
-        "IE": "Ireland",
-        "IM": "Isle of Man",
-        "IL": "Israel",
-        "IT": "Italy",
-        "JM": "Jamaica",
-        "JP": "Japan",
-        "JE": "Jersey",
-        "JO": "Jordan",
-        "KZ": "Kazakhstan",
-        "KE": "Kenya",
-        "KI": "Kiribati",
-        "KP": "Korea, Democratic People's Republic of",
-        "KR": "Korea, Republic of",
-        "KW": "Kuwait",
-        "KG": "Kyrgyzstan",
-        "LA": "Lao People's Democratic Republic",
-        "LV": "Latvia",
-        "LB": "Lebanon",
-        "LS": "Lesotho",
-        "LR": "Liberia",
-        "LY": "Libya",
-        "LI": "Liechtenstein",
-        "LT": "Lithuania",
-        "LU": "Luxembourg",
-        "MO": "Macao",
-        "MK": "Macedonia, the former Yugoslav Republic of",
-        "MG": "Madagascar",
-        "MW": "Malawi",
-        "MY": "Malaysia",
-        "MV": "Maldives",
-        "ML": "Mali",
-        "MT": "Malta",
-        "MH": "Marshall Islands",
-        "MQ": "Martinique",
-        "MR": "Mauritania",
-        "MU": "Mauritius",
-        "YT": "Mayotte",
-        "MX": "Mexico",
-        "FM": "Micronesia, Federated States of",
-        "MD": "Moldova, Republic of",
-        "MC": "Monaco",
-        "MN": "Mongolia",
-        "ME": "Montenegro",
-        "MS": "Montserrat",
-        "MA": "Morocco",
-        "MZ": "Mozambique",
-        "MM": "Myanmar",
-        "NA": "Namibia",
-        "NR": "Nauru",
-        "NP": "Nepal",
-        "NL": "Netherlands",
-        "NC": "New Caledonia",
-        "NZ": "New Zealand",
-        "NI": "Nicaragua",
-        "NE": "Niger",
-        "NG": "Nigeria",
-        "NU": "Niue",
-        "NF": "Norfolk Island",
-        "MP": "Northern Mariana Islands",
-        "NO": "Norway",
-        "OM": "Oman",
-        "PK": "Pakistan",
-        "PW": "Palau",
-        "PS": "Palestinian Territory, Occupied",
-        "PA": "Panama",
-        "PG": "Papua New Guinea",
-        "PY": "Paraguay",
-        "PE": "Peru",
-        "PH": "Philippines",
-        "PN": "Pitcairn",
-        "PL": "Poland",
-        "PT": "Portugal",
-        "PR": "Puerto Rico",
-        "QA": "Qatar",
-        "RE": "R" + "&eacute;" + "union",
-        "RO": "Romania",
-        "RU": "Russian Federation",
-        "RW": "Rwanda",
-        "SH": "Saint Helena, Ascension and Tristan da Cunha",
-        "KN": "Saint Kitts and Nevis",
-        "LC": "Saint Lucia",
-        "MF": "Saint Martin (French part)",
-        "PM": "Saint Pierre and Miquelon",
-        "VC": "Saint Vincent and the Grenadines",
-        "WS": "Samoa",
-        "SM": "San Marino",
-        "ST": "Sao Tome and Principe",
-        "SA": "Saudi Arabia",
-        "SN": "Senegal",
-        "RS": "Serbia",
-        "SC": "Seychelles",
-        "SL": "Sierra Leone",
-        "SG": "Singapore",
-        "SX": "Sint Maarten (Dutch part)",
-        "SK": "Slovakia",
-        "SI": "Slovenia",
-        "SB": "Solomon Islands",
-        "SO": "Somalia",
-        "ZA": "South Africa",
-        "GS": "South Georgia and the South Sandwich Islands",
-        "SS": "South Sudan",
-        "ES": "Spain",
-        "LK": "Sri Lanka",
-        "SD": "Sudan",
-        "SR": "Suriname",
-        "SZ": "Swaziland",
-        "SE": "Sweden",
-        "CH": "Switzerland",
-        "SY": "Syrian Arab Republic",
-        "TW": "Taiwan, Province of China",
-        "TJ": "Tajikistan",
-        "TZ": "Tanzania, United Republic of",
-        "TH": "Thailand",
-        "TL": "Timor-Leste",
-        "TG": "Togo",
-        "TK": "Tokelau",
-        "TO": "Tonga",
-        "TT": "Trinidad and Tobago",
-        "TN": "Tunisia",
-        "TR": "Turkey",
-        "TM": "Turkmenistan",
-        "TC": "Turks and Caicos Islands",
-        "TV": "Tuvalu",
-        "UG": "Uganda",
-        "UA": "Ukraine",
-        "AE": "United Arab Emirates",
-        "GB": "United Kingdom",
-        "US": "United States",
-        "UM": "United States Minor Outlying Islands",
-        "UY": "Uruguay",
-        "UZ": "Uzbekistan",
-        "VU": "Vanuatu",
-        "VE": "Venezuela, Bolivarian Republic of",
-        "VN": "Viet Nam",
-        "VG": "Virgin Islands, British",
-        "VI": "Virgin Islands, U.S.",
-        "WF": "Wallis and Futuna",
-        "EH": "Western Sahara",
-        "YE": "Yemen",
-        "ZM": "Zambia",
-        "ZW": "Zimbabwe"
+        'AF': 'Afghanistan',
+        'AL': 'Albania',
+        'DZ': 'Algeria',
+        'AS': 'American Samoa',
+        'AD': 'Andorra',
+        'AO': 'Angola',
+        'AI': 'Anguilla',
+        'AG': 'Antigua and Barbuda',
+        'AR': 'Argentina',
+        'AM': 'Armenia',
+        'AW': 'Aruba',
+        'AU': 'Australia',
+        'AT': 'Austria',
+        'AZ': 'Azerbaijan',
+        'BS': 'Bahamas',
+        'BH': 'Bahrain',
+        'BD': 'Bangladesh',
+        'BB': 'Barbados',
+        'BY': 'Belarus',
+        'BE': 'Belgium',
+        'BZ': 'Belize',
+        'BJ': 'Benin',
+        'BM': 'Bermuda',
+        'BT': 'Bhutan',
+        'BO': 'Bolivia, Plurinational State of',
+        'BA': 'Bosnia and Herzegovina',
+        'BW': 'Botswana',
+        'BV': 'Bouvet Island',
+        'BR': 'Brazil',
+        'IO': 'British Indian Ocean Territory',
+        'BN': 'Brunei Darussalam',
+        'BG': 'Bulgaria',
+        'BF': 'Burkina Faso',
+        'BI': 'Burundi',
+        'KH': 'Cambodia',
+        'CM': 'Cameroon',
+        'CA': 'Canada',
+        'CV': 'Cape Verde',
+        'KY': 'Cayman Islands',
+        'CF': 'Central African Republic',
+        'TD': 'Chad',
+        'CL': 'Chile',
+        'CN': 'China',
+        'CO': 'Colombia',
+        'KM': 'Comoros',
+        'CG': 'Congo',
+        'CD': 'Congo, the Democratic Republic of the',
+        'CK': 'Cook Islands',
+        'CR': 'Costa Rica',
+        'CI': 'C&ocirc;te d\'Ivoire',
+        'HR': 'Croatia',
+        'CU': 'Cuba',
+        'CW': 'Cura&ccedil;ao',
+        'CY': 'Cyprus',
+        'CZ': 'Czech Republic',
+        'DK': 'Denmark',
+        'DJ': 'Djibouti',
+        'DM': 'Dominica',
+        'DO': 'Dominican Republic',
+        'EC': 'Ecuador',
+        'EG': 'Egypt',
+        'SV': 'El Salvador',
+        'GQ': 'Equatorial Guinea',
+        'ER': 'Eritrea',
+        'EE': 'Estonia',
+        'ET': 'Ethiopia',
+        'FK': 'Falkland Islands (Malvinas)',
+        'FO': 'Faroe Islands',
+        'FJ': 'Fiji',
+        'FI': 'Finland',
+        'FR': 'France',
+        'GF': 'French Guiana',
+        'PF': 'French Polynesia',
+        'TF': 'French Southern Territories',
+        'GA': 'Gabon',
+        'GM': 'Gambia',
+        'GE': 'Georgia',
+        'DE': 'Germany',
+        'GH': 'Ghana',
+        'GI': 'Gibraltar',
+        'GR': 'Greece',
+        'GL': 'Greenland',
+        'GD': 'Grenada',
+        'GP': 'Guadeloupe',
+        'GU': 'Guam',
+        'GT': 'Guatemala',
+        'GG': 'Guernsey',
+        'GN': 'Guinea',
+        'GW': 'Guinea-Bissau',
+        'GY': 'Guyana',
+        'HT': 'Haiti',
+        'HM': 'Heard Island and McDonald Islands',
+        'VA': 'Holy See (Vatican City State)',
+        'HN': 'Honduras',
+        'HK': 'Hong Kong',
+        'HU': 'Hungary',
+        'IS': 'Iceland',
+        'IN': 'India',
+        'ID': 'Indonesia',
+        'IR': 'Iran, Islamic Republic of',
+        'IQ': 'Iraq',
+        'IE': 'Ireland',
+        'IM': 'Isle of Man',
+        'IL': 'Israel',
+        'IT': 'Italy',
+        'JM': 'Jamaica',
+        'JP': 'Japan',
+        'JE': 'Jersey',
+        'JO': 'Jordan',
+        'KZ': 'Kazakhstan',
+        'KE': 'Kenya',
+        'KI': 'Kiribati',
+        'KP': "Korea, Democratic People's Republic of",
+        'KR': 'Korea, Republic of',
+        'KW': 'Kuwait',
+        'KG': 'Kyrgyzstan',
+        'LA': "Lao People's Democratic Republic",
+        'LV': 'Latvia',
+        'LB': 'Lebanon',
+        'LS': 'Lesotho',
+        'LR': 'Liberia',
+        'LY': 'Libya',
+        'LI': 'Liechtenstein',
+        'LT': 'Lithuania',
+        'LU': 'Luxembourg',
+        'MO': 'Macao',
+        'MK': 'Macedonia, the former Yugoslav Republic of',
+        'MG': 'Madagascar',
+        'MW': 'Malawi',
+        'MY': 'Malaysia',
+        'MV': 'Maldives',
+        'ML': 'Mali',
+        'MT': 'Malta',
+        'MH': 'Marshall Islands',
+        'MQ': 'Martinique',
+        'MR': 'Mauritania',
+        'MU': 'Mauritius',
+        'YT': 'Mayotte',
+        'MX': 'Mexico',
+        'FM': 'Micronesia, Federated States of',
+        'MD': 'Moldova, Republic of',
+        'MC': 'Monaco',
+        'MN': 'Mongolia',
+        'ME': 'Montenegro',
+        'MS': 'Montserrat',
+        'MA': 'Morocco',
+        'MZ': 'Mozambique',
+        'MM': 'Myanmar',
+        'NA': 'Namibia',
+        'NR': 'Nauru',
+        'NP': 'Nepal',
+        'NL': 'Netherlands',
+        'NC': 'New Caledonia',
+        'NZ': 'New Zealand',
+        'NI': 'Nicaragua',
+        'NE': 'Niger',
+        'NG': 'Nigeria',
+        'NU': 'Niue',
+        'NF': 'Norfolk Island',
+        'MP': 'Northern Mariana Islands',
+        'NO': 'Norway',
+        'OM': 'Oman',
+        'PK': 'Pakistan',
+        'PW': 'Palau',
+        'PS': 'Palestinian Territory, Occupied',
+        'PA': 'Panama',
+        'PG': 'Papua New Guinea',
+        'PY': 'Paraguay',
+        'PE': 'Peru',
+        'PH': 'Philippines',
+        'PN': 'Pitcairn',
+        'PL': 'Poland',
+        'PT': 'Portugal',
+        'PR': 'Puerto Rico',
+        'QA': 'Qatar',
+        'RE': 'R&eacute;union',
+        'RO': 'Romania',
+        'RU': 'Russian Federation',
+        'RW': 'Rwanda',
+        'SH': 'Saint Helena, Ascension and Tristan da Cunha',
+        'KN': 'Saint Kitts and Nevis',
+        'LC': 'Saint Lucia',
+        'MF': 'Saint Martin (French part)',
+        'PM': 'Saint Pierre and Miquelon',
+        'VC': 'Saint Vincent and the Grenadines',
+        'WS': 'Samoa',
+        'SM': 'San Marino',
+        'ST': 'Sao Tome and Principe',
+        'SA': 'Saudi Arabia',
+        'SN': 'Senegal',
+        'RS': 'Serbia',
+        'SC': 'Seychelles',
+        'SL': 'Sierra Leone',
+        'SG': 'Singapore',
+        'SX': 'Sint Maarten (Dutch part)',
+        'SK': 'Slovakia',
+        'SI': 'Slovenia',
+        'SB': 'Solomon Islands',
+        'SO': 'Somalia',
+        'ZA': 'South Africa',
+        'GS': 'South Georgia and the South Sandwich Islands',
+        'SS': 'South Sudan',
+        'ES': 'Spain',
+        'LK': 'Sri Lanka',
+        'SD': 'Sudan',
+        'SR': 'Suriname',
+        'SZ': 'Swaziland',
+        'SE': 'Sweden',
+        'CH': 'Switzerland',
+        'SY': 'Syrian Arab Republic',
+        'TW': 'Taiwan, Province of China',
+        'TJ': 'Tajikistan',
+        'TZ': 'Tanzania, United Republic of',
+        'TH': 'Thailand',
+        'TL': 'Timor-Leste',
+        'TG': 'Togo',
+        'TK': 'Tokelau',
+        'TO': 'Tonga',
+        'TT': 'Trinidad and Tobago',
+        'TN': 'Tunisia',
+        'TR': 'Turkey',
+        'TM': 'Turkmenistan',
+        'TC': 'Turks and Caicos Islands',
+        'TV': 'Tuvalu',
+        'UG': 'Uganda',
+        'UA': 'Ukraine',
+        'AE': 'United Arab Emirates',
+        'GB': 'United Kingdom',
+        'US': 'United States',
+        'UM': 'United States Minor Outlying Islands',
+        'UY': 'Uruguay',
+        'UZ': 'Uzbekistan',
+        'VU': 'Vanuatu',
+        'VE': 'Venezuela, Bolivarian Republic of',
+        'VN': 'Viet Nam',
+        'VG': 'Virgin Islands, British',
+        'VI': 'Virgin Islands, U.S.',
+        'WF': 'Wallis and Futuna',
+        'EH': 'Western Sahara',
+        'YE': 'Yemen',
+        'ZM': 'Zambia',
+        'ZW': 'Zimbabwe'
     };
 
     $.flagStrap = function (element, options, i) {
@@ -380,7 +385,9 @@
             selectedValue = plugin.selected.value || selectedValue;
 
             if (selectedValue !== plugin.settings.placeholder.value) {
-                selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
+                selectedLabel = $('<i/>')
+                    .addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase())
+                    .css('margin-right', plugin.settings.labelMargin);
             }
 
             let buttonLabel = $('<span/>')
@@ -399,7 +406,7 @@
                 .html(buttonLabel);
 
             $('<span/>')
-                .addClass('caret')
+                .addClass('dropdown-toggle caret')
                 .css('margin-left', plugin.settings.labelMargin)
                 .insertAfter(buttonLabel);
 

From 48c14dbb008cb49ab5002ebddd196cca5f5c2a5d Mon Sep 17 00:00:00 2001
From: Mads Jensen <knoldesparker@gmail.com>
Date: Mon, 6 May 2019 17:52:28 +0200
Subject: [PATCH 10/10] [TASK] Changed search input to not use currently
 selected value, for slighty better UX. [ADD] Added onPostSelect callback
 option. [REFACTOR] Moved label margin to CSS file.

---
 README.md                       | 13 ++++----
 demo/index.html                 | 56 ++++++++++++++++++---------------
 dist/css/flags.css              | 20 ++++++++++--
 dist/js/jquery.flagstrap.js     | 51 ++++++++++++++++++++----------
 dist/js/jquery.flagstrap.min.js |  2 +-
 src/jquery.flagstrap.js         | 51 ++++++++++++++++++++----------
 6 files changed, 123 insertions(+), 70 deletions(-)

diff --git a/README.md b/README.md
index b4a4a43..102c348 100644
--- a/README.md
+++ b/README.md
@@ -73,7 +73,6 @@ This example will create a Flagstrap Dropdown giving the input field the name of
         inputName: 'country',
         buttonSize: "btn-lg",
         buttonType: "btn-primary",
-        labelMargin: "20px",
         scrollable: false,
         scrollableHeight: "350px",
         onSelect: function(value, element) {
@@ -159,12 +158,6 @@ Note: The rendered input element already has the ```form-control``` class added.
         <td>"btn-default"</td>
         <td>The bootstrap button type `class` for this drop down</td>
     </tr>
-    <tr>
-        <td>labelMargin</td>
-        <td>string</td>
-        <td>"20px"</td>
-        <td>The `margin` between `flag` and `text label`</td>
-    </tr>
     <tr>
         <td>scrollable</td>
         <td>boolean</td>
@@ -225,6 +218,12 @@ Note: The rendered input element already has the ```form-control``` class added.
         <td>null</td>
         <td>This callback gets called as the last thing, before the plugin returns.</td>
     </tr>
+    <tr>
+        <td>onPostSelect</td>
+        <td>function</td>
+        <td>null</td>
+        <td>This callback gets called as the last thing, after an item in the list is clicked.</td>
+    </tr>
     <tr>
         <td>placeholder</td>
         <td>bool|object</td>
diff --git a/demo/index.html b/demo/index.html
index 4afc85b..cd8a8eb 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -198,8 +198,8 @@ <h3>Example
 <pre class="prettyprint lang-js">
 $('#origin').flagStrap({
     placeholder: {
-        value: "",
-        text: "Country of origin"
+        value: '',
+        text: 'Country of origin'
     }
 });
 </pre>
@@ -226,15 +226,14 @@ <h3>Example
 <pre class="prettyprint lang-js">
  $('#options').flagStrap({
     countries: {
-        "AU": "Australia",
-        "GB": "United Kingdom",
-        "US": "United States"
+        'AU': 'Australia',
+        'GB': 'United Kingdom',
+        'US': 'United States'
     },
-    buttonSize: "btn-sm",
-    buttonType: "btn-info",
-    labelMargin: "10px",
+    buttonSize: 'btn-sm',
+    buttonType: 'btn-info',
     scrollable: false,
-    scrollableHeight: "350px"
+    scrollableHeight: '350px'
 });
 </pre>
         </div>
@@ -263,11 +262,10 @@ <h3>Example
             </h3>
 <pre class="prettyprint lang-js">
 $('#advanced').flagStrap({
-    buttonSize: "btn-lg",
-    buttonType: "btn-primary",
-    labelMargin: "20px",
+    buttonSize: 'btn-lg',
+    buttonType: 'btn-primary',
     scrollable: false,
-    scrollableHeight: "350px",
+    scrollableHeight: '350px',
     onSelect: function (value, element) {
         alert(value);
         console.log(element);
@@ -317,6 +315,9 @@ <h3>Example
             searchField: '#searchable input:first',
             searchType: 'default'
         })
+    },
+    onPostSelect: function() {
+        $('#searchable ul li').attr('style', '');
     }
 });
             </pre>
@@ -347,30 +348,30 @@ <h3>Result</h3>
 
     $('#origin').flagStrap({
         placeholder: {
-            value: "",
-            text: "Country of origin"
+            value: '',
+            text: 'Country of origin'
         }
     });
 
     $('#options').flagStrap({
         countries: {
-            "AU": "Australia",
-            "GB": "United Kingdom",
-            "US": "United States"
+            'AU': 'Australia',
+            'GB': 'United Kingdom',
+            'US': 'United States'
         },
-        buttonSize: "btn-sm",
-        buttonType: "btn-info",
-        labelMargin: "10px",
+        buttonSize: 'btn-sm',
+        buttonType: 'btn-info',
+        labelMargin: '10px',
         scrollable: false,
-        scrollableHeight: "350px"
+        scrollableHeight: '350px'
     });
 
     $('#advanced').flagStrap({
-        buttonSize: "btn-lg",
-        buttonType: "btn-primary",
-        labelMargin: "20px",
+        buttonSize: 'btn-lg',
+        buttonType: 'btn-primary',
+        labelMargin: '20px',
         scrollable: false,
-        scrollableHeight: "350px",
+        scrollableHeight: '350px',
         onSelect: function (value, element) {
             alert(value);
             console.log(element);
@@ -390,6 +391,9 @@ <h3>Result</h3>
                 searchField: '#searchable input:first',
                 searchType: 'default'
             })
+        },
+        onPostSelect: function() {
+            $('#searchable ul li').attr('style', '');
         }
     });
 
diff --git a/dist/css/flags.css b/dist/css/flags.css
index 90e372c..6ddd6e8 100644
--- a/dist/css/flags.css
+++ b/dist/css/flags.css
@@ -12,7 +12,12 @@
     display: inline-block;
     width: 16px;
     height: 11px;
-    background: url(flags.png) no-repeat
+    background: url(flags.png) no-repeat;
+    margin-right: 20px;
+}
+
+.flagstrap-caret {
+    margin: auto 0 auto 20px;
 }
 
 .flagstrap-placeholder,
@@ -26,10 +31,21 @@
 
 .flagstrap-search-button {
     font-size: 1rem;
-    height: 45px;
+    height: 52px;
     width: 100%;
 }
 
+.flagstrap-search-clear {
+    position: absolute;
+    right: 50px;
+    top: 18px;
+    height: 14px;
+    margin: auto;
+    font-size: 14px;
+    cursor: pointer;
+    color: #ccc;
+}
+
 .flagstrap-list {
     position: absolute;
     z-index: 1000;
diff --git a/dist/js/jquery.flagstrap.js b/dist/js/jquery.flagstrap.js
index 29181fd..174ce68 100644
--- a/dist/js/jquery.flagstrap.js
+++ b/dist/js/jquery.flagstrap.js
@@ -16,7 +16,6 @@
         inputId: undefined,
         buttonSize: 'btn-md',
         buttonType: 'btn-default',
-        labelMargin: '10px',
         scrollable: true,
         scrollableHeight: '250px',
         searchable: false,
@@ -385,9 +384,7 @@
             selectedValue = plugin.selected.value || selectedValue;
 
             if (selectedValue !== plugin.settings.placeholder.value) {
-                selectedLabel = $('<i/>')
-                .addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase())
-                .css('margin-right', plugin.settings.labelMargin);
+                selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase());
             }
 
             let buttonLabel = $('<span/>')
@@ -406,8 +403,7 @@
                 .html(buttonLabel);
 
             $('<span/>')
-                .addClass('dropdown-toggle caret')
-                .css('margin-left', plugin.settings.labelMargin)
+                .addClass('dropdown-toggle flagstrap-caret')
                 .insertAfter(buttonLabel);
 
             return button;
@@ -425,12 +421,10 @@
             selectedValue = plugin.selected.value || selectedValue;
 
             if (selectedValue !== plugin.settings.placeholder.value) {
-                selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
+                selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase());
             }
 
-            let caret = $('<div/>')
-                .addClass('caret dropdown-toggle')
-                .css('margin-left', plugin.settings.labelMargin);
+            let caret = $('<div/>').addClass('flagstrap-caret dropdown-toggle');
 
             // Build (embedded) search field
             let searchInput = $('<input/>')
@@ -438,8 +432,7 @@
                 .attr('id', 'flagstrap-search-' + uniqueId)
                 .attr('autocomplete', plugin.settings.searchAutoComplete)
                 .attr('placeholder', plugin.settings.searchPlaceholder)
-                .attr('value', selectedText)
-                .addClass('flex-grow-1 form-control hidden ' + plugin.settings.searchClass)
+                .addClass('form-control ' + plugin.settings.searchClass)
                 .on('focus', function () {
                     $('#flagstrap-drop-down-' + uniqueId + '-list').addClass('d-flex');
                 })
@@ -450,8 +443,9 @@
                     // escape
                     if (e.which === 27) {
                         $('#flagstrap-selected-' + uniqueId).toggleClass('hidden');
-                        $('#flagstrap-search-' + uniqueId).toggleClass('hidden');
+                        $('#flagstrap-search-wrapper-' + uniqueId).toggleClass('hidden');
                         $('#flagstrap-drop-down-' + uniqueId + '-list').removeClass('d-flex');
+                        $('#flagstrap-search-' + uniqueId).val('');
                     }
                 });
 
@@ -466,7 +460,22 @@
                 // Regular button content
                 .append(buttonLabel)
                 // Embedded search field
-                .append(searchInput);
+                .append(
+                    $('<span>')
+                        .attr('id', 'flagstrap-search-wrapper-' + uniqueId)
+                        .addClass('flex-grow-1 hidden')
+                        .append(searchInput)
+                        .append(
+                            $('<span>')
+                                .addClass('flagstrap-search-clear fas fa-times-circle')
+                                .on('click', function(e) {
+                                    e.stopPropagation();
+                                    // Clear search field and set focus
+                                    $('#flagstrap-search-' + uniqueId).val('').trigger('change').focus();
+                                }
+                            )
+                        )
+                );
 
             let button = $('<button/>')
                 .attr('type', 'button')
@@ -475,10 +484,11 @@
                 .on('click', function () {
                     // Toggle shown button content
                     $('#flagstrap-selected-' + uniqueId).toggleClass('hidden');
+                    $('#flagstrap-search-wrapper-' + uniqueId).toggleClass('hidden');
                     // Toggle dropdown
                     $('#flagstrap-drop-down-' + uniqueId + '-list').toggleClass('d-flex');
-                    // Update search field, toggle visibility and set focus to search field
-                    $('#flagstrap-search-' + uniqueId).val($('#flagstrap-selected-' + uniqueId).text()).toggleClass('hidden').focus();
+                    // Set focus to search field
+                    $('#flagstrap-search-' + uniqueId).focus();
                 })
                 .append(buttonContentWrapper)
                 .append(caret);
@@ -532,11 +542,18 @@
                         $('#flagstrap-selected-' + uniqueId).html($(this).html());
 
                         if (plugin.settings.searchable === true) {
-                            $('#flagstrap-search-' + uniqueId).toggleClass('hidden').val(text);
+                            // Toggle shown button content
+                            $('#flagstrap-search-wrapper-' + uniqueId).toggleClass('hidden');
                             $('#flagstrap-selected-' + uniqueId).toggleClass('hidden');
+                            // Clear search field
+                            $('#flagstrap-search-' + uniqueId).val('');
                         }
 
                         $('#flagstrap-drop-down-' + uniqueId + '-list').removeClass('d-flex');
+
+                        if (options !== undefined && options.onPostSelect !== undefined && options.onPostSelect instanceof Function) {
+                            options.onPostSelect.call(this);
+                        }
                     });
 
                 // Make it a list item
diff --git a/dist/js/jquery.flagstrap.min.js b/dist/js/jquery.flagstrap.min.js
index 48c27ae..48ee925 100644
--- a/dist/js/jquery.flagstrap.min.js
+++ b/dist/js/jquery.flagstrap.min.js
@@ -1 +1 @@
-!function(a){let e={inputId:void 0,buttonSize:"btn-md",buttonType:"btn-default",labelMargin:"10px",scrollable:!0,scrollableHeight:"250px",searchable:!1,searchAutoComplete:(0|9e6*Math.random()).toString(36),searchClass:"",searchPlaceholder:"Search",placeholder:{value:"",text:"Please select country"},selectedCountry:""},t={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia, Plurinational State of",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CO:"Colombia",KM:"Comoros",CG:"Congo",CD:"Congo, the Democratic Republic of the",CK:"Cook Islands",CR:"Costa Rica",CI:"C&ocirc;te d'Ivoire",HR:"Croatia",CU:"Cuba",CW:"Cura&ccedil;ao",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran, Islamic Republic of",IQ:"Iraq",IE:"Ireland",IM:"Isle of Man",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JE:"Jersey",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"Korea, Democratic People's Republic of",KR:"Korea, Republic of",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MK:"Macedonia, the former Yugoslav Republic of",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",ME:"Montenegro",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestinian Territory, Occupied",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"R&eacute;union",RO:"Romania",RU:"Russian Federation",RW:"Rwanda",SH:"Saint Helena, Ascension and Tristan da Cunha",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",MF:"Saint Martin (French part)",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",RS:"Serbia",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SX:"Sint Maarten (Dutch part)",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",SS:"South Sudan",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SZ:"Swaziland",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan, Province of China",TJ:"Tajikistan",TZ:"Tanzania, United Republic of",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela, Bolivarian Republic of",VN:"Viet Nam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe"};a.flagStrap=function(n,i,l){let s=this,r=function(a){let e="0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split("");a||(a=Math.floor(Math.random()*e.length));let t="";for(let n=0;n<a;n++)t+=e[Math.floor(Math.random()*e.length)];return t}(8);s.countries={},s.selected={value:null,text:null},s.settings={inputName:"country-"+r};let o=a(n),d="flagstrap-"+r,c="#"+d;s.init=function(){s.countries=t,s.countries=t,s.settings=a.extend({},e,i,o.data()),void 0!==s.settings.countries&&(s.countries=s.settings.countries),void 0!==s.settings.inputId&&(d=s.settings.inputId,c="#"+d),!0===s.settings.searchable?o.addClass("flagstrap").append(u).append(g).append(h):o.addClass("flagstrap").append(u).append(p).append(h),void 0!==s.settings.onSelect&&s.settings.onSelect instanceof Function&&a(c).change(function(e){i.onSelect(a(this).val(),this)}),a(c).hide()},s.val=function(e){a(c).val(e);let t="";t=e===s.settings.placeholder.value?'<i class="flagstrap-icon flagstrap-placeholder"></i> '+s.settings.placeholder.text:o.find("li a[data-val="+e+"]").html(),a("#flagstrap-selected-"+r).html(t)};let u=function(){let e=a("<select/>").attr("id",d).attr("name",s.settings.inputName);return a.each(s.countries,function(t,n){let i={value:t};void 0!==s.settings.selectedCountry&&s.settings.selectedCountry===t&&(i={value:t,selected:"selected"},s.selected={value:t,text:n}),e.append(a("<option>",i).text(n))}),!1!==s.settings.placeholder&&(e.prepend(a("<option selected>",{value:s.settings.placeholder.value,text:s.settings.placeholder.text})),s.selected={value:s.settings.placeholder.value,text:s.settings.placeholder.text}),e},p=function(){let e=a(c+" option:first-child"),t=e.text(),n=e.val(),i=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=s.selected.text||t,(n=s.selected.value||n)!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<span/>").attr("id","flagstrap-selected-"+r).html(i).append(t),o=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+r).addClass("btn "+s.settings.buttonType+" "+s.settings.buttonSize).on("click",function(e){a("#flagstrap-drop-down-"+r+"-list").toggleClass("d-flex")}).html(l);return a("<span/>").addClass("dropdown-toggle caret").css("margin-left",s.settings.labelMargin).insertAfter(l),o},g=function(){let e=a(c+" option:first-child"),t=e.text(),n=e.val(),i=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=s.selected.text||t,(n=s.selected.value||n)!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<div/>").addClass("caret dropdown-toggle").css("margin-left",s.settings.labelMargin),o=a("<input/>").attr("type","text").attr("id","flagstrap-search-"+r).attr("autocomplete",s.settings.searchAutoComplete).attr("placeholder",s.settings.searchPlaceholder).attr("value",t).addClass("flex-grow-1 form-control hidden "+s.settings.searchClass).on("focus",function(){a("#flagstrap-drop-down-"+r+"-list").addClass("d-flex")}).on("click",function(a){a.stopPropagation()}).on("keyup",function(e){27===e.which&&(a("#flagstrap-selected-"+r).toggleClass("hidden"),a("#flagstrap-search-"+r).toggleClass("hidden"),a("#flagstrap-drop-down-"+r+"-list").removeClass("d-flex"))}),d=a("<span/>").attr("id","flagstrap-selected-"+r).addClass("flex-grow-1").html(i).append(t),u=a("<div/>").addClass("input-group-sm w-100").append(d).append(o),p=a("<button/>").attr("type","button").attr("id","flagstrap-drop-down-"+r).addClass("btn "+s.settings.buttonType+" "+s.settings.buttonSize+" d-flex justify-content-end flagstrap-search-button").on("click",function(){a("#flagstrap-selected-"+r).toggleClass("hidden"),a("#flagstrap-drop-down-"+r+"-list").toggleClass("d-flex"),a("#flagstrap-search-"+r).val(a("#flagstrap-selected-"+r).text()).toggleClass("hidden").focus()}).append(u).append(l),g=a("<div/>").addClass("input-group-btn w-100").append(p);return a("<div/>").addClass("input-group").append(g)},h=function(){let e=a("<ul/>").attr("id","flagstrap-drop-down-"+r+"-list").attr("aria-labelled-by","flagstrap-drop-down-"+r).addClass("flagstrap-list");return s.settings.scrollable&&e.css({height:"auto",maxHeight:s.settings.scrollableHeight,overflowX:"hidden"}),a(c+" option").each(function(){let t=a(this).text(),n=a(this).val(),i=null;n!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let l=a("<a/>").attr("data-val",a(this).val()).html(i).append(t).on("click",function(e){a(c).val(a(this).data("val")),a(c).trigger("change"),a("#flagstrap-selected-"+r).html(a(this).html()),!0===s.settings.searchable&&(a("#flagstrap-search-"+r).toggleClass("hidden").val(t),a("#flagstrap-selected-"+r).toggleClass("hidden")),a("#flagstrap-drop-down-"+r+"-list").removeClass("d-flex")}),o=a("<li/>").addClass("flagstrap-list-item").prepend(l);e.append(o)}),e};s.init()},a.fn.flagStrap=function(e){let t=this.each(function(t){"string"==typeof e&&void 0!==a(this).data("flagStrap")?a(this).data("flagStrap").val(e):void 0===a(this).data("flagStrap")&&a(this).data("flagStrap",new a.flagStrap(this,e,t))});return void 0!==e&&void 0!==e.onDomReady&&e.onDomReady instanceof Function&&e.onDomReady.call(this),t}}(jQuery);
+!function(a){let e={inputId:void 0,buttonSize:"btn-md",buttonType:"btn-default",scrollable:!0,scrollableHeight:"250px",searchable:!1,searchAutoComplete:(0|9e6*Math.random()).toString(36),searchClass:"",searchPlaceholder:"Search",placeholder:{value:"",text:"Please select country"},selectedCountry:""},t={AF:"Afghanistan",AL:"Albania",DZ:"Algeria",AS:"American Samoa",AD:"Andorra",AO:"Angola",AI:"Anguilla",AG:"Antigua and Barbuda",AR:"Argentina",AM:"Armenia",AW:"Aruba",AU:"Australia",AT:"Austria",AZ:"Azerbaijan",BS:"Bahamas",BH:"Bahrain",BD:"Bangladesh",BB:"Barbados",BY:"Belarus",BE:"Belgium",BZ:"Belize",BJ:"Benin",BM:"Bermuda",BT:"Bhutan",BO:"Bolivia, Plurinational State of",BA:"Bosnia and Herzegovina",BW:"Botswana",BV:"Bouvet Island",BR:"Brazil",IO:"British Indian Ocean Territory",BN:"Brunei Darussalam",BG:"Bulgaria",BF:"Burkina Faso",BI:"Burundi",KH:"Cambodia",CM:"Cameroon",CA:"Canada",CV:"Cape Verde",KY:"Cayman Islands",CF:"Central African Republic",TD:"Chad",CL:"Chile",CN:"China",CO:"Colombia",KM:"Comoros",CG:"Congo",CD:"Congo, the Democratic Republic of the",CK:"Cook Islands",CR:"Costa Rica",CI:"C&ocirc;te d'Ivoire",HR:"Croatia",CU:"Cuba",CW:"Cura&ccedil;ao",CY:"Cyprus",CZ:"Czech Republic",DK:"Denmark",DJ:"Djibouti",DM:"Dominica",DO:"Dominican Republic",EC:"Ecuador",EG:"Egypt",SV:"El Salvador",GQ:"Equatorial Guinea",ER:"Eritrea",EE:"Estonia",ET:"Ethiopia",FK:"Falkland Islands (Malvinas)",FO:"Faroe Islands",FJ:"Fiji",FI:"Finland",FR:"France",GF:"French Guiana",PF:"French Polynesia",TF:"French Southern Territories",GA:"Gabon",GM:"Gambia",GE:"Georgia",DE:"Germany",GH:"Ghana",GI:"Gibraltar",GR:"Greece",GL:"Greenland",GD:"Grenada",GP:"Guadeloupe",GU:"Guam",GT:"Guatemala",GG:"Guernsey",GN:"Guinea",GW:"Guinea-Bissau",GY:"Guyana",HT:"Haiti",HM:"Heard Island and McDonald Islands",VA:"Holy See (Vatican City State)",HN:"Honduras",HK:"Hong Kong",HU:"Hungary",IS:"Iceland",IN:"India",ID:"Indonesia",IR:"Iran, Islamic Republic of",IQ:"Iraq",IE:"Ireland",IM:"Isle of Man",IL:"Israel",IT:"Italy",JM:"Jamaica",JP:"Japan",JE:"Jersey",JO:"Jordan",KZ:"Kazakhstan",KE:"Kenya",KI:"Kiribati",KP:"Korea, Democratic People's Republic of",KR:"Korea, Republic of",KW:"Kuwait",KG:"Kyrgyzstan",LA:"Lao People's Democratic Republic",LV:"Latvia",LB:"Lebanon",LS:"Lesotho",LR:"Liberia",LY:"Libya",LI:"Liechtenstein",LT:"Lithuania",LU:"Luxembourg",MO:"Macao",MK:"Macedonia, the former Yugoslav Republic of",MG:"Madagascar",MW:"Malawi",MY:"Malaysia",MV:"Maldives",ML:"Mali",MT:"Malta",MH:"Marshall Islands",MQ:"Martinique",MR:"Mauritania",MU:"Mauritius",YT:"Mayotte",MX:"Mexico",FM:"Micronesia, Federated States of",MD:"Moldova, Republic of",MC:"Monaco",MN:"Mongolia",ME:"Montenegro",MS:"Montserrat",MA:"Morocco",MZ:"Mozambique",MM:"Myanmar",NA:"Namibia",NR:"Nauru",NP:"Nepal",NL:"Netherlands",NC:"New Caledonia",NZ:"New Zealand",NI:"Nicaragua",NE:"Niger",NG:"Nigeria",NU:"Niue",NF:"Norfolk Island",MP:"Northern Mariana Islands",NO:"Norway",OM:"Oman",PK:"Pakistan",PW:"Palau",PS:"Palestinian Territory, Occupied",PA:"Panama",PG:"Papua New Guinea",PY:"Paraguay",PE:"Peru",PH:"Philippines",PN:"Pitcairn",PL:"Poland",PT:"Portugal",PR:"Puerto Rico",QA:"Qatar",RE:"R&eacute;union",RO:"Romania",RU:"Russian Federation",RW:"Rwanda",SH:"Saint Helena, Ascension and Tristan da Cunha",KN:"Saint Kitts and Nevis",LC:"Saint Lucia",MF:"Saint Martin (French part)",PM:"Saint Pierre and Miquelon",VC:"Saint Vincent and the Grenadines",WS:"Samoa",SM:"San Marino",ST:"Sao Tome and Principe",SA:"Saudi Arabia",SN:"Senegal",RS:"Serbia",SC:"Seychelles",SL:"Sierra Leone",SG:"Singapore",SX:"Sint Maarten (Dutch part)",SK:"Slovakia",SI:"Slovenia",SB:"Solomon Islands",SO:"Somalia",ZA:"South Africa",GS:"South Georgia and the South Sandwich Islands",SS:"South Sudan",ES:"Spain",LK:"Sri Lanka",SD:"Sudan",SR:"Suriname",SZ:"Swaziland",SE:"Sweden",CH:"Switzerland",SY:"Syrian Arab Republic",TW:"Taiwan, Province of China",TJ:"Tajikistan",TZ:"Tanzania, United Republic of",TH:"Thailand",TL:"Timor-Leste",TG:"Togo",TK:"Tokelau",TO:"Tonga",TT:"Trinidad and Tobago",TN:"Tunisia",TR:"Turkey",TM:"Turkmenistan",TC:"Turks and Caicos Islands",TV:"Tuvalu",UG:"Uganda",UA:"Ukraine",AE:"United Arab Emirates",GB:"United Kingdom",US:"United States",UM:"United States Minor Outlying Islands",UY:"Uruguay",UZ:"Uzbekistan",VU:"Vanuatu",VE:"Venezuela, Bolivarian Republic of",VN:"Viet Nam",VG:"Virgin Islands, British",VI:"Virgin Islands, U.S.",WF:"Wallis and Futuna",EH:"Western Sahara",YE:"Yemen",ZM:"Zambia",ZW:"Zimbabwe"};a.flagStrap=function(n,i,l){let s=this,r=function(a){let e="0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".split("");a||(a=Math.floor(Math.random()*e.length));let t="";for(let n=0;n<a;n++)t+=e[Math.floor(Math.random()*e.length)];return t}(8);s.countries={},s.selected={value:null,text:null},s.settings={inputName:"country-"+r};let o=a(n),d="flagstrap-"+r,c="#"+d;s.init=function(){s.countries=t,s.countries=t,s.settings=a.extend({},e,i,o.data()),void 0!==s.settings.countries&&(s.countries=s.settings.countries),void 0!==s.settings.inputId&&(d=s.settings.inputId,c="#"+d),!0===s.settings.searchable?o.addClass("flagstrap").append(p).append(g).append(h):o.addClass("flagstrap").append(p).append(u).append(h),void 0!==s.settings.onSelect&&s.settings.onSelect instanceof Function&&a(c).change(function(e){i.onSelect(a(this).val(),this)}),a(c).hide()},s.val=function(e){a(c).val(e);let t="";t=e===s.settings.placeholder.value?'<i class="flagstrap-icon flagstrap-placeholder"></i> '+s.settings.placeholder.text:o.find("li a[data-val="+e+"]").html(),a("#flagstrap-selected-"+r).html(t)};let p=function(){let e=a("<select/>").attr("id",d).attr("name",s.settings.inputName);return a.each(s.countries,function(t,n){let i={value:t};void 0!==s.settings.selectedCountry&&s.settings.selectedCountry===t&&(i={value:t,selected:"selected"},s.selected={value:t,text:n}),e.append(a("<option>",i).text(n))}),!1!==s.settings.placeholder&&(e.prepend(a("<option selected>",{value:s.settings.placeholder.value,text:s.settings.placeholder.text})),s.selected={value:s.settings.placeholder.value,text:s.settings.placeholder.text}),e},u=function(){let e=a(c+" option:first-child"),t=e.text(),n=e.val(),i=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=s.selected.text||t,(n=s.selected.value||n)!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()));let l=a("<span/>").attr("id","flagstrap-selected-"+r).html(i).append(t),o=a("<button/>").attr("type","button").attr("data-toggle","dropdown").attr("id","flagstrap-drop-down-"+r).addClass("btn "+s.settings.buttonType+" "+s.settings.buttonSize).on("click",function(e){a("#flagstrap-drop-down-"+r+"-list").toggleClass("d-flex")}).html(l);return a("<span/>").addClass("dropdown-toggle flagstrap-caret").insertAfter(l),o},g=function(){let e=a(c+" option:first-child"),t=e.text(),n=e.val(),i=a("<i/>").addClass("flagstrap-icon flagstrap-placeholder");t=s.selected.text||t,(n=s.selected.value||n)!==s.settings.placeholder.value&&(i=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()));let l=a("<div/>").addClass("flagstrap-caret dropdown-toggle"),o=a("<input/>").attr("type","text").attr("id","flagstrap-search-"+r).attr("autocomplete",s.settings.searchAutoComplete).attr("placeholder",s.settings.searchPlaceholder).addClass("form-control "+s.settings.searchClass).on("focus",function(){a("#flagstrap-drop-down-"+r+"-list").addClass("d-flex")}).on("click",function(a){a.stopPropagation()}).on("keyup",function(e){27===e.which&&(a("#flagstrap-selected-"+r).toggleClass("hidden"),a("#flagstrap-search-wrapper-"+r).toggleClass("hidden"),a("#flagstrap-drop-down-"+r+"-list").removeClass("d-flex"),a("#flagstrap-search-"+r).val(""))}),d=a("<span/>").attr("id","flagstrap-selected-"+r).addClass("flex-grow-1").html(i).append(t),p=a("<div/>").addClass("input-group-sm w-100").append(d).append(a("<span>").attr("id","flagstrap-search-wrapper-"+r).addClass("flex-grow-1 hidden").append(o).append(a("<span>").addClass("flagstrap-search-clear fas fa-times-circle").on("click",function(e){e.stopPropagation(),a("#flagstrap-search-"+r).val("").trigger("change").focus()}))),u=a("<button/>").attr("type","button").attr("id","flagstrap-drop-down-"+r).addClass("btn "+s.settings.buttonType+" "+s.settings.buttonSize+" d-flex justify-content-end flagstrap-search-button").on("click",function(){a("#flagstrap-selected-"+r).toggleClass("hidden"),a("#flagstrap-search-wrapper-"+r).toggleClass("hidden"),a("#flagstrap-drop-down-"+r+"-list").toggleClass("d-flex"),a("#flagstrap-search-"+r).focus()}).append(p).append(l),g=a("<div/>").addClass("input-group-btn w-100").append(u);return a("<div/>").addClass("input-group").append(g)},h=function(){let e=a("<ul/>").attr("id","flagstrap-drop-down-"+r+"-list").attr("aria-labelled-by","flagstrap-drop-down-"+r).addClass("flagstrap-list");return s.settings.scrollable&&e.css({height:"auto",maxHeight:s.settings.scrollableHeight,overflowX:"hidden"}),a(c+" option").each(function(){let t=a(this).text(),n=a(this).val(),l=null;n!==s.settings.placeholder.value&&(l=a("<i/>").addClass("flagstrap-icon flagstrap-"+n.toLowerCase()).css("margin-right",s.settings.labelMargin));let o=a("<a/>").attr("data-val",a(this).val()).html(l).append(t).on("click",function(e){a(c).val(a(this).data("val")),a(c).trigger("change"),a("#flagstrap-selected-"+r).html(a(this).html()),!0===s.settings.searchable&&(a("#flagstrap-search-wrapper-"+r).toggleClass("hidden"),a("#flagstrap-selected-"+r).toggleClass("hidden"),a("#flagstrap-search-"+r).val("")),a("#flagstrap-drop-down-"+r+"-list").removeClass("d-flex"),void 0!==i&&void 0!==i.onPostSelect&&i.onPostSelect instanceof Function&&i.onPostSelect.call(this)}),d=a("<li/>").addClass("flagstrap-list-item").prepend(o);e.append(d)}),e};s.init()},a.fn.flagStrap=function(e){let t=this.each(function(t){"string"==typeof e&&void 0!==a(this).data("flagStrap")?a(this).data("flagStrap").val(e):void 0===a(this).data("flagStrap")&&a(this).data("flagStrap",new a.flagStrap(this,e,t))});return void 0!==e&&void 0!==e.onDomReady&&e.onDomReady instanceof Function&&e.onDomReady.call(this),t}}(jQuery);
diff --git a/src/jquery.flagstrap.js b/src/jquery.flagstrap.js
index 9ad165a..4ec3cf9 100644
--- a/src/jquery.flagstrap.js
+++ b/src/jquery.flagstrap.js
@@ -16,7 +16,6 @@
         inputId: undefined,
         buttonSize: 'btn-md',
         buttonType: 'btn-default',
-        labelMargin: '10px',
         scrollable: true,
         scrollableHeight: '250px',
         searchable: false,
@@ -385,9 +384,7 @@
             selectedValue = plugin.selected.value || selectedValue;
 
             if (selectedValue !== plugin.settings.placeholder.value) {
-                selectedLabel = $('<i/>')
-                    .addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase())
-                    .css('margin-right', plugin.settings.labelMargin);
+                selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase());
             }
 
             let buttonLabel = $('<span/>')
@@ -406,8 +403,7 @@
                 .html(buttonLabel);
 
             $('<span/>')
-                .addClass('dropdown-toggle caret')
-                .css('margin-left', plugin.settings.labelMargin)
+                .addClass('dropdown-toggle flagstrap-caret')
                 .insertAfter(buttonLabel);
 
             return button;
@@ -425,12 +421,10 @@
             selectedValue = plugin.selected.value || selectedValue;
 
             if (selectedValue !== plugin.settings.placeholder.value) {
-                selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase()).css('margin-right', plugin.settings.labelMargin);
+                selectedLabel = $('<i/>').addClass('flagstrap-icon flagstrap-' + selectedValue.toLowerCase());
             }
 
-            let caret = $('<div/>')
-                .addClass('caret dropdown-toggle')
-                .css('margin-left', plugin.settings.labelMargin);
+            let caret = $('<div/>').addClass('flagstrap-caret dropdown-toggle');
 
             // Build (embedded) search field
             let searchInput = $('<input/>')
@@ -438,8 +432,7 @@
                 .attr('id', 'flagstrap-search-' + uniqueId)
                 .attr('autocomplete', plugin.settings.searchAutoComplete)
                 .attr('placeholder', plugin.settings.searchPlaceholder)
-                .attr('value', selectedText)
-                .addClass('flex-grow-1 form-control hidden ' + plugin.settings.searchClass)
+                .addClass('form-control ' + plugin.settings.searchClass)
                 .on('focus', function () {
                     $('#flagstrap-drop-down-' + uniqueId + '-list').addClass('d-flex');
                 })
@@ -450,8 +443,9 @@
                     // escape
                     if (e.which === 27) {
                         $('#flagstrap-selected-' + uniqueId).toggleClass('hidden');
-                        $('#flagstrap-search-' + uniqueId).toggleClass('hidden');
+                        $('#flagstrap-search-wrapper-' + uniqueId).toggleClass('hidden');
                         $('#flagstrap-drop-down-' + uniqueId + '-list').removeClass('d-flex');
+                        $('#flagstrap-search-' + uniqueId).val('');
                     }
                 });
 
@@ -466,7 +460,22 @@
                 // Regular button content
                 .append(buttonLabel)
                 // Embedded search field
-                .append(searchInput);
+                .append(
+                    $('<span>')
+                        .attr('id', 'flagstrap-search-wrapper-' + uniqueId)
+                        .addClass('flex-grow-1 hidden')
+                        .append(searchInput)
+                        .append(
+                            $('<span>')
+                                .addClass('flagstrap-search-clear fas fa-times-circle')
+                                .on('click', function(e) {
+                                        e.stopPropagation();
+                                        // Clear search field and set focus
+                                        $('#flagstrap-search-' + uniqueId).val('').trigger('change').focus();
+                                    }
+                                )
+                        )
+                );
 
             let button = $('<button/>')
                 .attr('type', 'button')
@@ -475,10 +484,11 @@
                 .on('click', function () {
                     // Toggle shown button content
                     $('#flagstrap-selected-' + uniqueId).toggleClass('hidden');
+                    $('#flagstrap-search-wrapper-' + uniqueId).toggleClass('hidden');
                     // Toggle dropdown
                     $('#flagstrap-drop-down-' + uniqueId + '-list').toggleClass('d-flex');
-                    // Update search field, toggle visibility and set focus to search field
-                    $('#flagstrap-search-' + uniqueId).val($('#flagstrap-selected-' + uniqueId).text()).toggleClass('hidden').focus();
+                    // Set focus to search field
+                    $('#flagstrap-search-' + uniqueId).focus();
                 })
                 .append(buttonContentWrapper)
                 .append(caret);
@@ -532,11 +542,18 @@
                         $('#flagstrap-selected-' + uniqueId).html($(this).html());
 
                         if (plugin.settings.searchable === true) {
-                            $('#flagstrap-search-' + uniqueId).toggleClass('hidden').val(text);
+                            // Toggle shown button content
+                            $('#flagstrap-search-wrapper-' + uniqueId).toggleClass('hidden');
                             $('#flagstrap-selected-' + uniqueId).toggleClass('hidden');
+                            // Clear search field
+                            $('#flagstrap-search-' + uniqueId).val('');
                         }
 
                         $('#flagstrap-drop-down-' + uniqueId + '-list').removeClass('d-flex');
+
+                        if (options !== undefined && options.onPostSelect !== undefined && options.onPostSelect instanceof Function) {
+                            options.onPostSelect.call(this);
+                        }
                     });
 
                 // Make it a list item