Autocomplete

Try typing your country.

data: {
    src: async () => {
        try {
            // Fetch Data from external Source
            const source = await fetch('data/countries.json');
            // Data is array of `Objects` | `Strings`
            const data = await source.json();

            return data.countries;
        } catch (error) {
            return error;
        }
    },
},                         

Try typing "sau".

const autoCompleteJS2 = new autoComplete({
    selector: "#autoComplete2",
    data: {
        src: ["Sauce", "Wild Boar", "Goat"],
    }
});                

Try typing "Whi" -> it searches in surnames, firstnames, company names. After you select the item, person's email is inserted into the input field.

const autoCompleteJS4 = new autoComplete({
    selector: "#autoComplete4",
    data: {
        src: [
            { "name": "Alyce", "surname": "White", "company": "Combot", "email": "alycewhite@combot.com", "city": "Talpa" },
            { "name": "Santos", "surname": "Pierce", "company": "Franscene", "email": "santospierce@franscene.com", "city": "Vienna" },
            { "name": "Deirdre", "surname": "Reed", "company": "Whiskey Comp.", "email": "deirdrereed@whiskeycomp.com", "city": "Belva" },
            { "name": "Whitaker", "surname": "Brennan", "company": "Opticom", "email": "whitakerbrennan@opticom.com", "city": "Lodoga" },
            { "name": "Kristin", "surname": "Norman", "company": "Irack", "email": "kristinnorman@irack.com", "city": "Bodega" }
        ],
        keys: ["name", "surname", "company"],
    },
    resultItem: {
        highlight: true,
    },
    events: {
        input: {
            selection: (event) => {
                const selection = event.detail.selection.value;
                autoCompleteJS4.input.value = selection.email;
            }
        }
    }
});