CODEWITHSUNDEEP
apiautocompletemapsalgolia
Elektra
Elektra

Reputation: 39

Algolia autocomplete - how to remove "administrative" municipalities/districts from autocomplete suggestions

I am integrating Algolia autocomplete and do not like the look of the autocomplete suggestions. Specifically, I don't want the administrative municipalities and districts to appear in the suggestions, only address, city, country. How can I omit the administrative query?

For example, if I type in "Sarajevo" the suggestions appear as "Sarajevo, Kanton of Sarajevo, Bosnia and Herzegovina" - I want it to appear as simply "Sarajevo, Bosnia and Herzegovina".

Upvotes: 0

Views: 237

Answers (2)

Oludre
Oludre

Reputation: 134

To solve the problem of once you select a 'place', the administrative level gets displayed in the search bar., you can leverage on jquery's focusout event.

Example

    var cityCountry  ,searchInput;
    searchInput = $('#search-input'); //our search field

    //Initialize
    var placesAutocomplete = places({
        // appId: 'YOUR_PLACES_APP_ID',
        // apiKey: 'YOUR_PLACES_API_KEY',
        container: document.querySelector('#search-input'),
    });

    //Attach required data to cityCountry  
    placesAutocomplete.on('change', function(e){
        let suggestion,city,country;
        suggestion = e.suggestion;
        city = suggestion.name;
        country= suggestion.country;
        cityCountry  = city+', '+country;
    });

    //Manipulate the search field on focusout
    searchInput.on('focusout', function(){
        setTimeout(function () {
            searchInput.val(cityCountry);
        },1)
    });

Note, it won't work without the setTimeout().

Upvotes: 0

Olivier Lance
Olivier Lance

Reputation: 1748

You should use the templates option of the Places constructor.

Here's a simple example:

const placesInstance = places({
    ...
    templates: {
        suggestion: function(s) {
            return [s.highlight.name, s.highlight.city, s.highlight.country].join(', ');
        }
    }
});

Have a look at the function that is used by default for a more elaborate sample: https://github.com/algolia/places/blob/master/src/formatDropdownValue.js

Upvotes: 1

Related Questions