Fio suggestion field
Simple and lightweight package, that helps with russian fio
An input field that helps users fill in their full name faster and more correctly. Fully customizable and ready for production, just change styles, and let's rock. It works with dadata.ru or your own custom service.
Usage
Install
$ npm install @qubeekio/vue-fio-autocomplete
Init
import FioAutocomplete from "@qubeekio/vue-fio-autocomplete"
...
methods: {
async fetch(data) {
return await axios
.request({
method: 'POST',
url: 'https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/fio',
headers: {
Authorization: 'Token ' + 'Your token'
},
data
})
.then(({ data }) => {
return data.suggestions
})
}
}
...
<fio-autocomplete-field
v-model="fio"
:load-using="fetch"
/>
Output value
Field returns user input and splits it into the right parts of fio.
fio: {
surname: "Иванов",
name: "Иван",
patronymic: "Иванович",
gender: "MALE"
}
Styles
The component includes SCSS.
You can find list of SCSS variables here.
@import "@qubeekio/vue-fio-autocomplete/styles/main.scss";
Estimated response from the server
--
{
"suggestions": [
{
"value": "Виктор",
"unrestricted_value": "Виктор",
"data": {
"surname": null,
"name": "Виктор",
"patronymic": null,
"gender": "MALE",
"source": null,
"qc": "0"
}
},
]
}