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 ?