Hello! Has anyone added a dropdown list of countries to the Address collection in LF forms? Thanks!
I was irritated that my other suggession doesn't have the drop-down field selector like a single-line field with auto suggestions does, here is one way to make that work (I would have preferred to just add the functionality to the country field, but I couldn't get that to work, so I tried this instead).
This functionality uses a single line field with the auto-suggestions included (this is nice because you can edit that list from the Layout page instead of in the Javascript - and might be able to populate via a Lookup - Note that I didn't test the lookup with this) - the field should have Class Name of myCountry.
Then it uses an address field - with Class Name of myAddress.
The code moves the input from the myCountry single line field into the address box on myAddress, hides the parts of the myCountry field that is left behind, and hides the built-in Country field. It looks exactly like the regular country field from the normal Address set-up, but it retains the auto-suggest functionality of the Single Line field. In order to ensure the variable is retained in the correct place, when the value is changed on the Single Line Field, the change is duplicated to the built-in Country field.
$(document).ready(function () {
//after moving the input below, it won't be related to the myCountry class, so this adds a new class to make it easier to select later.
$('.myCountry input').addClass('myCountryInput');
//This resizes the field so that it will fill the entire div similar to how the built-in field does.
$('.myCountry input').parent().css('width', '100%');
//This moves the single-line field into the Address field block, before the built-in country field.
$('.myAddress .Country').before($('.myCountry input').parent());
//This hides the build-in country field.
$('.myAddress .Country').hide();
//This hides the parts of the single line field that were left behind.
$('.myCountry').hide();
//When the value of the single line field is changed, change the built-in field to match, so that the variable is stored as expected.
$('.myCountryInput').change(function() {
$('.myAddress .Country').val($(this).val());
});
});
This code will do an auto-complete - when you start typing, it'll show matching suggestions.
$(document).ready(function () {
var availableCountries = [
"Canada",
"Mexico",
"United Kingdom",
"United States"
];
$(".cf-address .Country").each(function() {
$(this).autocomplete({
source: availableCountries
});
});
});
If you go to the Awesomplete API you can learn how to use awesomeplete however you like instead of overlapping another input's awesomeplete. Although I do like that your solution would (probably) allow for using lookup rules.
Anywho, adding suggestions with this is really simple once you have the magic incantations:
let myInputField = $('.cf-address .Country')
let awesomeplete = new Awesomplete(myInputField);
let awesomeplete.list = [
'a suggestion',
'another suggestion',
'yet another suggestion'
];