typeahead-standalone

[The_C]

Hallo,
kann mir mal jemand bitte sagen weshalb typeahead-standalone beim laden der Kundendaten alles 1:1 wie in dem Array in das Feld laden wenn man eine Suchanfrage in das Feld reinschreibt?
Bin leider kein Experte in JS und bitte um Hilfe.

Das ist mein HTML Code:

<div class="row mb-3">
    <label for="eingabefeldNachname3" class="col-sm-4 control-label">Nachname</label>
    <div class="col-sm-8">

        <div class="typeahead__container">
            <div class="typeahead__field">
                <span class="typeahead__query">
                    <f:form.textfield property="nachname" class="form-control js-typeahead" type="search"
                                      id="eingabefeldNachname3" placeholder="Nachname"
                                      additionalAttributes="{autocomplete: 'off'}" />
                </span>
            </div>
        </div>
    </div>
</div>

Und das soll mit diesem JS aus der DB oder wo auch immer geladen werden:

/************************ typeahead-standalone START ****************************/

document.addEventListener('DOMContentLoaded', function () {

    const calendarEl = document.getElementById('calendar');
    let customers = [];

    if (calendarEl && calendarEl.dataset.customers) {
        try {
            customers = JSON.parse(calendarEl.dataset.customers);
            console.log('Geladene Kundendaten:', customers);

            // Sicherstellen, dass customers ein Array ist
            if (!Array.isArray(customers)) {
                console.error('Kundendaten sind kein Array');
                customers = [];
            }
        } catch (e) {
            console.error('Fehler beim Parsen der Kundendaten:', e);
            customers = [];
        }
    }

    if (calendarEl && calendarEl.dataset.customers) {
        try {
            // Bereinigen der Daten (falls nötig)
            let customersData = calendarEl.dataset.customers
                .replace(/\]\s*\[/g, ',') // Beschädigte JSON-Strukturen reparieren
                .replace(/"\{/g, '{')     // Weitere Bereinigungen falls nötig

            customers = JSON.parse(customersData);

            // Sicherstellen, dass customers ein Array ist
            if (!Array.isArray(customers)) {
                console.error('Kundendaten sind kein Array');
                customers = [];
            }

            console.log('Geladene Kundendaten:', customers);
        } catch (e) {
            console.error('Fehler beim Parsen der Kundendaten:', e);
            customers = [];
        }
    }
    document.querySelectorAll(".js-typeahead").forEach(input => {
        typeahead({
            input: input,
            highlight: true,
            source: {
                local: [customers],
                keys: ['name', 'vorname', 'id'],
            },
            templates: {
                suggestion: function (item) {
                    // Anpassen an Ihre Objektfelder:
                    return `<div>${item.name || ''} ${item.vorname || ''} ${item.id || ''}</div>`;
                },
                notFound: '<div class="tt-empty">Keine Ergebnisse</div>'
            },
            minLength: 3, // Mindestlänge der Eingabe bevor Suche beginnt
            // limit: 10 // Maximale Anzahl an Ergebnissen
            callback: {
                onClickAfter: (node, form, items) => {
                    fetch(items.getdaten)
                        .then(response => response.text())
                        .then(html => {
                            document.querySelector('#toggle_vorteile_i').innerHTML = html;
                        });
                }
            }
        });
    });
});

/************************ typeahead-standalone END ****************************/

Im Debug auf der Console sehe ich das in dem Array genug Kunden geladen werden und das gibt er mir 1:1 wieder verstehe ich nicht!
Kann mir das jemand zeigen wie man das richtig macht?