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
{ return data.suggestions }) } } ...
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"
}
},
]
}
1 Nov 6, 2021
0 Jul 8, 2021
48 Dec 28, 2022
209 Nov 19, 2022
52 Jan 8, 2023
3 Nov 8, 2020
0 Dec 3, 2019
2 Sep 25, 2022
2.6k Dec 31, 2022
5 Aug 12, 2022
81 Jun 29, 2022
16 Mar 7, 2022
4 Nov 18, 2022
284 Jan 6, 2023
1 May 31, 2022
46 Dec 10, 2022
42 Nov 29, 2022
0 Dec 19, 2021
6 Jun 6, 2022