I get undefined trying to select an element

[jparadaa]

Hi,
I just discovered autoComplete and I am doing some tests based on Codepen's example code, the example I am doing is almost working as I would expect to finish with this issue, but I have a detail with the code because when selecting an item I receive in the input an undefined value, can you help me to solve this problem?,

var autoCompleteJS = new autoComplete({
        selector: "#autoComplete",
        threshold: 1,
        debounce: 100,
        data: {
            src: async function () {
                const source = await  fetch("getcustomer1", {
                    method: "POST",                    
                    headers: { 
			"Content-Type": "application/json"
		},
                    body: JSON.stringify({ term: $("#autoComplete").val() })
                });
                const data = await source.json();                
		return data.data.map(item => item.label);								
            },
            key: ["label"],
            cache: false
        },        

		//
		resultsList: {
		element: (list, data) => {
		const info = document.createElement("p");
			if (data.results.length > 0) {
				info.innerHTML = `Mostrando <strong>${data.results.length}</strong> de <strong>${data.matches.length}</strong> resultados`;
			} else {
				info.innerHTML = `Se han encontrado <strong>${data.matches.length}</strong> resultados para <strong>"${data.query}"</strong>`;
			}
			list.prepend(info);
		},
		noResults: true,
		maxResults: 15,
		tabSelect: true
	},
	resultItem: {
		element: (item, data) => {
			// Modify Results Item Style
			item.style = "display: flex; justify-content: space-between;";
			// Modify Results Item Content
			item.innerHTML = `
      <span style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
        ${data.match}
      </span>`;
		},
		highlight: true
	},
	events: {
		input: {
			focus: () => {
				if (autoCompleteJS.input.value.length) autoCompleteJS.start();
			}
		}
	}
//});
        
}); // FINAL


	autoCompleteJS.input.addEventListener("selection", function (event) {
	const feedback = event.detail;
	//autoCompleteJS.input.blur();
	// Prepare User's Selected Value
	const selection = feedback.selection.value[feedback.selection.key];
	// Render selected choice to selection div
	//document.querySelector(".selection").innerHTML = selection;
	// Replace Input value with the selected value
	autoCompleteJS.input.value =  feedback.selection.label; //selection;
	// Console log autoComplete data feedback
	console.log(feedback);
});

And I also want to take advantage of your help, in the image above you can see that the item description is a little separated, how do I control that? and also the separation between each item in the list?

I appreciate your help.

BTW: Here is the structure of my API response

{"data":[{"value":"0689","label":"ABASTECEDORA DE EJES Y REFACCIONES"},{"value":"1601","label":"EJES Y REFACCIONES DEL NORTE"}]}

Regards,
Javier

[darbor]

Hi,
Did you manage to solve this problem? i got stuck on the same.