Feature request: State/Province Abbreviations

[iapparatus]

Thank you for the great script. One feature that would be very useful is to be able to optionally use state/province 2-letter abbreviations as values in the region selector.

[benkeen]

Agreed, that would be very nice. Good suggestion.

[nozpheratu]

👍

[benkeen]

Problem about this one is that I don't think all country regions are able to be reduced to a 2-char abbreviations. But perhaps just an "abbreviate" option that limits them to whatever abbreviation is appropriate, according to the country.

[nozpheratu]

@benkeen Sounds like a sound idea to me, or perhaps 'alpha-2-code' or 'code' option would be a bit more explicit.

[sventech]

Do you have a plan for how to approach this? We could get a spreadsheet of region codes for each country perhaps... Or use the wiki.

[benkeen]

How about this? https://github.com/benkeen/country-region-selector/blob/master/source/data-with-abbrev.js#L47

It's super simple: right now the | separator is used to delimit the list of regions in a country; I just added a secondary ~ delimiter to delimit the region and the region abbreviation. That'll keep the data set as small as possible and work for any country.

If people are willing to do the (tedious!) task of updating that file, I can update the code to support it...

[I can help out, too - but it may take some time for me to get to it].

[sventech]

Works great for me! I care most about US/AU/NZ/GB/BR/NO and a couple others, so I should be able to track down the data, then I'll fill in any others I can find easily. Hopefully @iapparatus will contribute some codes too and we can fill it out quickly. 👍

[benkeen]

Nice, thanks @sventech!

[sventech]

The regions we have for American Samoa are those from the tourist info, but the Wikipedia page lists these counties:
Ituau~01|Ma'oputasi~02|Sa'Ole~03|Sua~04|Vaifanua~05|Alataua~06|Fofo~07|Leasina~08|Tualatai~09|Tualauta~10|Faleasao~11|Fitiuta~12|Ofu~13|Olosega~14|Ta'ū~15|Rose Atoll~21|Swains Island~22

[sQu1rr]

you can hook up data from my fork guys, i changed some core functionality (defaulting to abbr data and such) and the regions/countries are a bit different, more ISOish i guess, so i didn't want to create a pull request. I will be using my modified version for my own needs - so feel free to pull my changes if you need to.
https://github.com/sQu1rr/country-region-selector/blob/master/source/data-with-abbrev.js

[wobblymusic]

This will be a great enhancement. Has code been written to support it? All I see is the data.

[sventech]

@wobblymusic I think Ben is planning to implement it when the data is finished. He designed the data format to be handled by a trivial mod to his code, from what I understand. You're welcome to contribute -- you can just copy the data from sQu1rr / Aleksandr and make sure it is correctly formatted. There is a list of what countries remain to be done at the top of the file.

[benkeen]

Thanks for everyone whose chimed in - and for the pull requests! :) Clearly there's interest in this feature, so I'll work on this shortly, even though all the data isn't fully complete.

• I'll add a big proviso saying "currently only supports X,Y,Z countries" which we'll update as the data gets added.
• if the shortcode region doesn't exist for a country but the user requests it, output a console.warn() saying as much and downgrade to the full region name.
• I'll add a whitelist/blacklist option to let you specify which countries appear in the country dropdowns. So you could choose only countries that had region abbrevs (if you wished)

I think between these, it'll be okay to implement now without the full data set.

Once this is in, I'll also try to devote a little time to adding in some as well. Be nice to get this sucker all wrapped up!

[wobblymusic]

That would be great. The second bullet, in particular, is how I imagined the feature would work.

[benkeen]

Hi all, I've just added this and released 0.2.0.

Couple of quick comments:

• You can see how it works in Example 8 here: http://benkeen.github.io/country-region-selector/ (also see examples 6 & 7 for the whitelist and blacklist options, respectively).
• I've now deleted the data-with-abbrev.js file - all future updates to add abbreviations can be made right to the data file itself: https://github.com/benkeen/country-region-selector/blob/master/source/data.js
• I decided not to output a console.warn if the condition where the developer had specified data-value="shortcode" and the user selected a country whose regions didn't have a shortcode... seemed wrong somehow.

Let me know if anyone spots any problems! I'll leave this issue open a little while before closing it.

[sventech]

Norway's listing has the name and abbreviation twice. Probably my fault. I've created a pull request.

Thanks for implementing the feature!

[wobblymusic]

This is working great, Thank you so much! One small change that should probably be made to the README file. If you are using the data-value="shortcode" option, then the data-default-value for region needs to be the abbreviation, not the full name. So the data-default-value definition should read something like this:

data-default-value - optional. The default selected value in the region dropdown (e.g. "British Columbia", or "BC" if using the data-value="shortcode" option)

I apologizing for not implementing this myself, but I'm not very git-literate (I'm working on it!).

[benkeen]

Ah, good call! I'll make a note to update the doc tonight.

[wobblymusic]

Since this new version with the region abbreviations was posted, I'm having trouble adding a customization I had working in the previous version. I'm using this in conjuction with another function that requires the 2 letter country code as a parameter. When the country under crs is changed, I want to populate the region fields, but I also want to fire this other script. In the older version of crs, I put my function within $(this).on("change", function() {_populateRegionFields... and it worked perfectly. But when I try to do this in the new version it doesn't fire. Even an alert() isn't triggered, although it was in the older version. What am I missing?

Relatedly, I stupidly didn't save my customized old version and now I can't figure out how to grab the 2 letter country code for the selected country. Can someone help me with that as well? I don't want to use the country shortcode option when I trigger crs; I just want to grab the selected country shortcode from within the crs script when the selected country changes.

Thanks.

[wobblymusic]

To be more clear, if I change the code,

$(this).on("change", function() {
_populateRegionFields(countryElement, regionElement);
});


to

$(this).on("change", function() {
_populateRegionFields(countryElement, regionElement);
alert('Hello!');
});


The list of regions does correctly change when the country changes, but the alert doesn't fire. It did fire under the older version from last week.

[benkeen]

Hey @wobblymusic! Hmm... I can't think of anything that would affect that change. But do you need to modify the script at all? Might be better to just add your own JS so it won't get overwritten with future upgrades.

e.g. just add some JS in your page like $(".your-selector-here").on("change", function() { ... });. That should work... I'm not canceling the event, so it should get called on the onChange event. There, you could do whatever you want.

To get the value with jQuery, you can do this:

$(".your-selector-here").on("change", function() { 
   console.log("my value is: ", this.value);
   console.log("or using jQuery... ", $(this).val());
});

Hope this helps a bit.

[wobblymusic]

Hi Ben. The problem is that I want to grab the two letter country abbreviation for my other function, but I want crs to give me the full country name in its selector value. How can I grab the two-letter abbreviation outside of crs.js when it's not $(this).val() ?

on edit: I realize I could create my own variable of country names and abbreviations, but that seems wrong somehow.

[benkeen]

Ah, I see... Drat. Yes, you're kind of stuck with hacking it in that case. Maybe the least unobtrusive hack would be to edit it to output an extra data-shortcode attribute on the options. Then you could do your own JS to just extract that value...

<option value="full region name here" data-shortcode="shortcode here">full region name here</option>

If you're really stuck, email me what you have and I can see if I can edit it this weekend. ben.keen@gmail.com

[wobblymusic]

I'm not sure what happened -- probably a caching issue -- but my original hack is working now. I can access the country by using _countries[this.selectedIndex-1][1] within the $(this).on("change", function(). If you want to add the option of outputting an extra data-shortcode attribute, I won't say no, but I'm ok for now. Thanks for all the support!

[benkeen]

Good to hear! Thanks for the follow-up. :)

[benkeen]

N.B. on this issue. I thought I'd implement a React version of the country-region-selector script, so will be moving the data source to a separate location in a different format. See: https://github.com/benkeen/country-region-data

That way I'll be able to pull that data source into whatever scripts I need and manipulate it into an appropriate format for packaging.

[sventech]

That seems like a good idea. It also makes it easier for other projects, such as Zippopotam.us to use the data (although I suppose there might be license issues, since they use the OpenData license).