Dogfalo/materialize

Here's a more difficult question:

To create the autocomplete data structure you can do something like this:

data["Fido Tucker"] = "/_AGHR/image_cache/fido.png";
data["James Brown"] = "/_AGHR/image_cache/brownLab.png";
data["Golden Boy"] = "/_AGHR/image_cache/golden.png";
data["Fido Tucker"] = "/_AGHR/image_cache/lab.png";

var options = {
data: data,
minLength: 1,
onAutocomplete: persist_image,
};

var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems, {});
var my_instance = instances[0];

Then, when onAutocomplete fires you get the key that identifies who was selected and you can persist the image

function persist_image(data_key)
{
my_instance.el.style.backgroundImage = "url(" + my_instance.options.data[data_key] + ")";
my_instance.el.style.backgroundRepeat = "no-repeat";
my_instance.el.style.backgroundSize = "40px 40px";
my_instance.el.style.backgroundPosition = "right";
}

Here's the question: Notice that there are 2 "fido tucker"s in the data. Imagine these are two employees in a large company that happen to have the same name. How can you tell, which fido tucker was selected? Is there a way of adding a meta-data field (such as employee ID) to data? Obviously you can concatenate the employee id to the name and get something like "Fido Tucker (id:100345035)" which would be unique, but then the ID shows up in the dropdown and in the final selection - which looks bad. Is there a way to know uniquely, who was selected? Even if you could pull an index from the data in the autocomplete function, that could be made to work (just keep a separate array with index/ID pairs in the same order).

Appreciate any ideas anyone may have.