This is my code for autocomplete.js (Vanilla). When I paste a word which doesn't match my key for exemple I search for a reference

AP15305-1552

If I do a console.log(data) it returns me my array with my search result. When I check it doesn't go on resultItem.element, I guess it's because the search doesn't match the key event if I have a data.

This is the key if u want to see it

C15305 - 1552 CustomerName.

Someone have any solutions for that ?

<div class="autoComplete_wrapper" style="position : relative">
    <input id="autoComplete" type="search" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off">
</div>
<script>
    var urlrecherche = 'url' ;
    const autoCompleteJS = new autoComplete({
        data: {
            src: async (query) => {
                var url ="webservice/anonymous_PS.asmx/GetJSON?PSname=" + urlrecherche + "&filtre=" ;
                try {
                    // Fetch Data from external Source
                    const source = await fetch(`${url}${query}`);
                    // Data is array of `Objects` | `Strings`
                    const data = await source.json();
                    return data;
                } catch (error) {
                    return error;
                }
            },
            keys: ["Nom"],
            cache: false
        },
        resultItem: {
            element: (item, data) => {
                item.innerHTML = `<a style="color:#337ab7" href="${data.value.Url}">${data.match}<br><small style="color:gray;">${data.value.object}</small></a>`
            }
        },
        events: {
            input: {
                focus() {
                    if (autoCompleteJS.input.value.length) {
                        autoCompleteJS.start()
                    }
                }
            }
        }
    });
</script>

UPDATE

I add this code before return data in data.src

for (let i = 0; i < data.length; i++) {
    if (!data[i].Nom.includes(query) && data.length > 0) {
        var ul = document.getElementById("autoComplete_list_1")
        ul.innerHTML = `<li role="option" id="autoComplete_result_${i}"><a style="color:#337ab7" href="${data[i].Url}">${data[i].Nom}<br><small style="color:gray;">${data[i].objet}</small></a></li>`
    }
}

It doesn't work, it doesn't add my list in the ul and show it