diff --git a/README.md b/README.md index ad727f1..102c348 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 @@ -76,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) { @@ -90,6 +86,43 @@ This example will create a Flagstrap Dropdown giving the input field the name of ``` +##### 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 + +``` + +##### Making it 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 + +``` +Note: The rendered input element already has the ```form-control``` class added. + + ### Options @@ -125,12 +158,6 @@ This example will create a Flagstrap Dropdown giving the input field the name of - - - - - - @@ -144,18 +171,60 @@ This example will create a Flagstrap Dropdown giving the input field the name of - + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + - - + + + + + + + + + + + + + + @@ -170,3 +239,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..cd8a8eb 100644 --- a/demo/index.html +++ b/demo/index.html @@ -5,9 +5,9 @@ Flagstrap Demo - + - +
"btn-default" The bootstrap button type `class` for this drop down
labelMarginstring"20px"The `margin` between `flag` and `text label`
scrollable boolean`max-height` for the scrollable drop down
countries (optional)searchablebooleanfalseEmbed 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
searchPlaceholderstring"Search country"Placeholder text in the search input element.
searchAutoCompletestringRandomly generated stringTurns 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.
searchClassstring"FancySearchElement"Add one or more classes to the search input element.
countries object (all) Only show specific countries
Example:

{"GB": "United Kingdom", "US": "United States"}

will only show the USA and UK.
onSelect (optional)selectedCountrystringSet (single) selected country. "GB" or "US" ...
onSelect function null This callback gets called each time the select is changed. It receives two parameters, the new value, and the select element.
onDomReadyfunctionnullThis callback gets called as the last thing, before the plugin returns.
onPostSelectfunctionnullThis callback gets called as the last thing, after an item in the list is clicked.
placeholder bool|object {value: "", text: "Please select a country"}