Handling an array of objects

[travpeck]

Would it be feasible to have the feature where you could have an array of objects like such:

[{ name="Johnny Appleseed", id="100" }, { name="Paul Bunyan", id="200" }]

And be able to show the name property in the list but also associate the id property with it once it is selected? Basically hold a reference to the record of the selected item.

Example:

var input = document.getElementById("myinput");
new Awesomplete(input, {
    list: [{ name="Johnny Appleseed", id="100" }, { name="Paul Bunyan", id="200" }],
    display: 'name'
});

input.on('awesomplete-selectcomplete', function() {
    // Ability to get the selected value, such as 'Johnny Appleseed'
    // But also get other record information (such as id)
};

[vlazar]

To everyone interested in differentiating value from displayed text, aka key/value feature, aka array of objects feature.

The code is ready and it's almost 100% backward compatible. To ensure everything working fine for you we need your help with testing it in the wild before it's released. See this PR: Separate label/value for each suggestion in list

[vlazar]

Separate label/value is landed #16866
It is also possible to initialize list with separate label/value via <datalist> or <ul>.

Read about different label and value at the end of Basic usage section and about new data method at the end of Extend section.