How can I find the city with spaces or accents like in the documentation geo.api.gouv using vuejs and axios?

83 views Asked by At

I use this API : https://geo.api.gouv.fr/decoupage-administratif/communes It works really good but the problem is that if I'm searching a city (commune) like : "Saint-Étienne" I have to write exactly "Saint-Étienne". I would like to find this city for example without space : "saint étienne" or accent : "saint etienne". In the documentation it's good. But in my project in Vue.Js with Axios I can't find solutions. The v-select needs the exact writing.

Here is the input :

  <v-autocomplete
                    v-else
                    @input="inputCity('departureCity', 'departureDepartment', selectedArrayCityDeparture)"
                    :loading="loading"
                    :items="citiesDeparture"
                    :search-input.sync="searchCitiesDeparture"
                    v-model="selectedArrayCityDeparture"
                    :rules="[
                        (value) => searchCitiesDeparture !== null || $t('form.validation.theDepartureCity') + ' ' + $t('isRequired')
                        ]"
                    text
                    hide-no-data’
                    required
                    :label="$t('form.departureCity')"
                    :no-data-text="$t('noDataAvailable')"
                />

methods :

inputCity(cityType, departmentType, index) {
      if (index !== null && this.responseCities[index] !== undefined) {
        this.form[cityType] = this.responseCities[index].nom;
        this.form[departmentType] = this.responseCities[index].codeDepartement;
        }
      },
    querySelections(q, cities) {
      this.$axios.get(this.apiRoutes.gouv.cities(q)).then(
        response => {
          this.loading = false;
          this[cities] = _.map(response.data, function (item, i) {
              return ({ text: item.nom + ' (' + item.codeDepartement + ')' , value: i });
          });
          this.responseCities = response.data;
        }
        )
      },

watch :

  search (val) {
      val && val !== this.select && this.querySelections(val)
    },
    searchCitiesArrival(val) {
      if (val !== null && val !== undefined && val.length > 1 && !(this.selectedArrayCityArrival !== null && this.citiesArrival[this.selectedArrayCityArrival] !== undefined && this.citiesArrival[this.selectedArrayCityArrival].text === val)) {
        this.querySelections(val, "citiesArrival");
      }
    },
    searchCitiesDeparture(val) {
      if (val !== null && val !== undefined && val.length > 1 && !(this.selectedArrayCityDeparture !== null && this.citiesDeparture[this.selectedArrayCityDeparture] !== undefined && this.citiesDeparture[this.selectedArrayCityDeparture].text === val)) {
        this.querySelections(val, "citiesDeparture");
      }
    }

data :

 citiesDeparture: [],
 citiesArrival: [],
 responseCities: [],

call Api :

gouv: {
    cities: function (name) {
        return ('https://geo.api.gouv.fr/communes?nom=' + name + '&fields=&format=json&geometry=centre"');
    }
},

How can I find the city with spaces or accents like in the documentation ?

0

There are 0 answers