Autofill JS

import Autofill from "@natachah/vanilla-frontend/js/_autofill"

Syntax

The autofill component make you able to automaticaly fill some <input> fields by another.

You can use it with a <select> tag with the aria-controls="IdOfTheOtherField" attribute.

The other field must have a data-autofill="NameOfTheValue" attribute. The value must exist into the <option> tags as data-NameOfTheValue="value".

html

<fieldset>
    <legend>Favorite animal</legend>
    <div class="group">
        <select id="autofillSelect" name="select" aria-controls="animalID">
            <option>--</option>
            <option data-id="1">Cat</option>
            <option data-id="2">Dog</option>
            <option data-id="3">Lizzard</option>
            <option data-id="4">Bird</option>
        </select>
        <input id="animalID" type="text" placeholder="ID of the animal" data-autofill="id" readonly>
    </div>
</fieldset>

js

import Autofill from "@natachah/vanilla-frontend/js/_autofill"
const autofillSelect = document.getElementById('autofillSelect')
if(autofillSelect) new Autofill(autofillSelect)

Datalist / Autocomplete

<fieldset>
    <legend>Favorite ice cream</legend>
    <div class="group">
        <input id="autofillList" name="datalist" list="myDatalist" aria-controls="flavourID flavorColor" placeholder="Choose a flavor">
        <input id="flavourID" type="text" placeholder="ID of the icecream" data-autofill="id" readonly>
        <input id="flavorColor" type="text" placeholder="Color of the icecream" data-autofill="color" readonly>
    </div>
</fieldset>
<datalist id="myDatalist">
    <option data-id="1" data-color="Brown" value="Chocolate">
    </option>
    <option data-id="2" data-color="White" value="Coconut">
    </option>
    <option data-id="3" data-color="Green" value="Mint">
    </option>
    <option data-id="4" data-color="Red" value="Strawberry">
    </option>
    <option data-id="5" data-color="Yellow" value="Vanilla">
    </option>
</datalist>

File upload

<label for="autofillList">Choose a file</label>
<input  id="autofillFile" type="file" name="file" aria-controls="fileName fileSize fileType fileCleanName fileExtension">
<fieldset>
    <legend>File data</legend>
    <div class="group">
        <input id="fileName" type="text" placeholder="Name of the file" data-autofill="name" readonly>
        <input id="fileSize" type="text" placeholder="Size of the file" data-autofill="size" readonly>
        <input id="fileType" type="text" placeholder="Type of the file" data-autofill="type" readonly>
        <input id="fileCleanName" type="text" placeholder="Clean name of the file" data-autofill="filename" readonly>
        <input id="fileExtension" type="text" placeholder="Extension of the file" data-autofill="extension" readonly>
    </div>
</fieldset>

Javascript

Events

Event name	Description	Value
autofill:changed	This event is fired when the original element value has changed	current as HTMLElement *Could be an <option> or a File

const myAutofill = document.getElementById('myAutofill')
myAutofill.addEventListener('autofill:changed', (e) => {
    const theCurrentItem = e.detail.current
    ...
})