Multilingual Location Picker Plugin – JS Region Picker

Category: Form , Javascript | June 29, 2023
Author:soulteary
Views Total:42 views
Official Page:Go to website
Last Update:June 29, 2023
License:MIT

Preview:

Multilingual Location Picker Plugin – JS Region Picker

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

You Might Be Interested In:


Leave a Reply