Multilingual Location Picker Plugin – JS Region Picker

Preview:

Description:

JS Region Picker is a JavaScript library that generates an interactive, multilingual dropdown picker interface for selecting locations by region, country, state, or city.

Options are categorized alphabetically for easy browsing and also searchable by keyword. It has desktop and mobile versions to provide an optimized option-picking experience for international audiences and mobile devices.

How to use it:

1. Load the JS Region Picker’s files in the document.

<!-- Desktop -->
<link rel="stylesheet" href="/assets/css/region-picker.css">
<script src="/assets/js/region-picker.js"></script>

<!-- Mobile -->
<link rel="stylesheet" href="/assets/css/region-picker.mobile.css">
<script src="/assets/js/region-picker.mobile.js"></script>

2. Create a container to hold the region picker.

<div id="example">
  <!-- container for region picker -->
</div>

3. Prepare your country or region data as follows:

const mydata = [
      {
        "name":"Argentina",
        "cname":"AR", // localize the data here
        "code":"ar"
      },
      // more data 
]

4. Initialize the Region Picker.

let instance = RegionPicker("#container", {
    data: myData, 
    preselected: "us", 
    updater: function (data) {
      // get the selected data
      console.log(data)
    }
});

5. Show and hide the Region Picker.

instance.Show
instance.Hide