document.addEventListener('DOMContentLoaded', function() {
    fetch("http://localhost:7878/api/dialects")
    .then(response => response.json())
    .then(dialects => {
        const dialectsData = dialects.reduce((accumulator, dialect) => {
            accumulator[`${dialect.countryId}-${dialect.languageId}: ${dialect.name}`] = null
            return accumulator
        }, {})

        var elems = document.querySelectorAll('#dialect-autocomplete');
        var instances = M.Autocomplete.init(elems, {
            data: dialectsData
        });
    })
    
});