Cacher is the code snippet organizer for pro developers

// We will store our search data here
var data = [
	0: {id: "1",title: "One"},
	1: {id: "2",title: "Two"},
	2: {id: "3",title: "Three"},
	3: {id: "4",title: "Four"},
];

/**
 *  Run autoComplete based on data above.
 *
 */
new autoComplete({
    data: {
        src: data,
        key: ["title"]
    },
    sort: (a, b) => {
        if (a.match < b.match) return -1;
        if (a.match > b.match) return 1;
        return 0;
    },
    placeHolder: "Type in search term...",
    selector: "#my-autocomplete input",
    threshold: 2, // Min. Chars length to start Engine | (Optional)
    searchEngine: "loose", // Search Engine type/mode  strict/loose
    resultsList: {
        container: source => {
            resultsListID = "autocomplete-dropdown";
            return resultsListID;
        },
        destination: document.querySelector("#autocomplete-results"),
        position: "afterend"
    },
    resultItem: (data, source) => {
        //console.log(data);
        //let title = data.match;
        let title = data.value.title;
        title = title.replace("&amp;", "&", title);
        return "<div><label class='uk-form-label uk-margin-remove'>"+title+"</label>" + "<span class='uk-text-small uk-text-muted'>select</span></div>";
    },
    highlight: true,
    maxResults: 5,
    onSelection: response => {

        let item = response.selection.value;

        // console.log(item);
        
        // set current input value
        let inputAutocomplete = document.querySelector("#my-autocomplete > input");
        inputAutocomplete.value = item.title.replace("&amp;", "&", item.title);


    }
});

<div id="my-autocomplete">
    <label class="uk-form-label">MY Autocomplete</label>
    <input class="uk-input" type="text" name="MY_FIELD_NAME" value="" autocomplete='off' required />
 </div>