Country Autosuggest by Gramp's Workbench

I’ve implemented Gramp’s Workbench Autosuggest function into my special project. When trying to use it, the only thing that shows up is a grey block. Did I copy the code wrong? Below is the code for the entire webpage, is there a line of code that is interfering with the function? All of the element names and info from the database are correct.

import wixData from 'wix-data';

$w.onReady(() => {
    wixData.query('Categories')
        .find()
        .then(res => {
            let options = [{"value": 'All Types', 'label': 'All Types'}];
            options.push(...res.items.map(category => {
                return {'value': category.title, 'label': category.title};
            }));
            $w('#categoryDropdown').options = options;
        })
});

let lastFilterTitle;
let lastFilterCategory;

let debounceTimer;
export function searchBox_input(event) {
     if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
        filter($w('#searchBox').value, lastFilterCategory);
    }, 200);
}

function filter(title, category) {
    if (lastFilterTitle !== title || lastFilterCategory !== category) {
        let newFilter = wixData.filter();
        if (title)
            newFilter = newFilter.contains('resultTitle', title);
        if (category)
            newFilter = newFilter.eq('resultType', category);
        $w('#dataset1').setFilter(newFilter);
        lastFilterTitle = title;
        lastFilterCategory = category;
        
    }
}

export function categoryDropdown_click(event) {
     filter(lastFilterTitle, $w('#categoryDropdown').value) 
}

const HL_COLOR = "rgba(190,190,250)";
const REG_COLOR = "rgba(222,222,222)";

let listSize;
let currIndex = -1;

$w.onReady(function () {

    $w('#searchBox').onKeyPress((event) => {
        setTimeout(() => {
            if ($w('#searchBox').value.length === 0) {
                currIndex = -1;
                $w("#rptDropdown").collapse()
                    .then(() => {
                        console.log("Done with collapse");
                    });
            } else {

                switch (event.key) {
                case "Enter":
                    $w('#searchBox').value = $w('#rptDropdown').data[currIndex].title;
                    $w("#rptDropdown").collapse()
                        .then(() => {
                            console.log("Done with collapse");
                        });
                    break;
                case "ArrowLeft":
                case "ArrowRight":
                    break;
                case "ArrowUp":
                    if (currIndex > 0) {
                        currIndex -= 1;
                        refresh_repeater();
                    }
                    break;
                case "ArrowDown":
                    if (currIndex < listSize - 1) {
                        currIndex += 1;
                        refresh_repeater();
                    }
                    break;
                case "Escape":
                    $w('#searchBox').value = '';
                    currIndex = -1;
                    $w("#rptDropdown").collapse()
                        .then(() => {
                            console.log("Done with collapse");
                        });
                    break;
                default:
                    currIndex = -1;
                    wixData.query("SearchDatabase")
                        .startsWith("resultTitle", $w('#searchBox').value)
                        .ascending("resultTitle")
                        .limit(5)
                        .find()
                        .then((res) => {
                            $w('#rptDropdown').data = [];
                            $w('#rptDropdown').data = res.items;
                            listSize = res.items.length;
                            $w('#rptDropdown').expand();
                        });
                    break;
                }
            }
        }, 50)
    });
});

export function rptDropdown_itemReady($item, itemData, index) {
$item('#name').text = itemData.title;

    if (index === currIndex) {
        $item("#rptBox").style.backgroundColor = HL_COLOR;
    } else {
        $item("#rptBox").style.backgroundColor = REG_COLOR;
    }

    $item('#container1').onClick(() => {
        $w('#searchBox').value = itemData.title;
        $w('#rptDropdown').collapse();
    });
}

function refresh_repeater() {
    $w("#rptDropdown").forEachItem(($item, itemData, index) => {
        $item('#name').text = itemData.title;

        if (index === currIndex) {
            $item("#rptBox").style.backgroundColor = HL_COLOR;
        } else {
            $item("#rptBox").style.backgroundColor = REG_COLOR;
        }

        $item('#container1').onClick(() => {
            $w('#searchBox').value = itemData.title;
            $w('#rptDropdown').collapse();
        });
    });
}

@Yisrael (Wix)

I would say → this questions goes to → Yisrael

Did you try running the example itself to see if it works?

Realize that it’s not enough to just copy the code. You have to also build a proper Repeater containing the necessary elements. And, all of the elements need to have element IDs that match those in the code.