After intergrating Algolia JavaScript and Stylesheet, i've done following steps...
At first, i've created a new file in my themes js folderfunction loadPlaces(locale, country) {
var placesAutocomplete = places({
container: document.querySelector('#sCity'),
type: 'city',
language: locale,
countries: [country],
templates: {
value: function(suggestion) {
return suggestion.name;
}
}
});
placesAutocomplete.on('change', function resultSelected(e) {
var region = e.suggestion.administrative,
country = e.suggestion.countryCode.toUpperCase(),
parent = $('#sCountry').parent("div"),
button = parent.children("button");
if (region) { $("#sRegion").val(region); }
else { $("#sRegion").val(""); }
if (country) {
$("#sCountry").val(country);
$('#sCountry option[value='+country+']').attr('selected','selected'); //only needed for Material-Input
$(button).children('span.filter-option.pull-left').html($("#sCountry option:selected").text()); //only needed for Material-Input
}
});
}
then in footer.php$countries = array();
foreach(osc_get_countries() as $v) { array_push($countries, "'".strtolower($v['pk_c_code']."'")); }
$countries = implode(", ", $countries);
//Doesnt work well, because you need the ISO 639-1 Country Code, not the first two letters of language code
$locale = explode("_", osc_current_user_locale());
$locale = $locale[0];
?>
...
...
<script>
$(document).ready(function(){
$("#sCountry").on("change", function(event){
var selCountry = $(this).val().toLowerCase();
loadPlaces("<?php echo $locale; ?>", (selCountry.length >=1 ? selCountry : "<?php echo $countries; ?>"));
});
loadPlaces("<?php echo $locale; ?>", "<?php echo $countries; ?>");
});
</script>
</body>
</html>
But... there are two problems left...
- The function is started when page is loaded, but doesnt working unless you are selecting a country
- Sometimes if you change the country, there are still citys from other countrys left
Maybe another developer has ideas for a better implementing of this function, to work all well
Edit:If you are using the autocomplete from osclass, you must first disable it, otherwise the results will appear twice.
