Search query for collection that expands collapsed repeater code help

[Graphique]

Hi, I have coded a function on a dynamic page on editor that allows users to search for a name on someones profile card which is linked to a collection. We want to allow users to search for a specific name instead of all profiles so have made the repeater collapsed until name is searched. The problem I’m facing now is on the search, it flashes all the members before showing the specific profile. I have tried reducing and increasing the debounce timer but not really sure what else I need to do. Can someone help me with the code please?

Here is the code:

import wixData from 'wix-data';

let debounceTimer;
export function searchQueryInput_keyPress(event, $w) {
    if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
        ( $w("#SellerlistRepeater").collapsed )
    }
    debounceTimer = setTimeout(() => {
        filter($w('#searchQueryInput').value);
    }, 600);

}

    let lastFilterTitle;
    function filter(title) {
    $w('#bioMSSellerDataset').setFilter(wixData.filter().contains('title', title));
    lastFilterTitle = title;
     $w("#SellerlistRepeater").expand(); }

[anthony]

@Graphique

        ( $w("#SellerlistRepeater").collapsed )

This line doesn’t do anything. Is the expectation to $w("#SellerlistRepeater").collapse() this element? Adjusting that may help.

Further should do something like mark the function async export async function search... and then await the call await $w("#SellerlistRepeater").collapse() so that the filter isn’t executed until the #SellerlistRepeater is fully collapsed. Then don’t need to worry about debouncing.

As an aside, in general when dealing with inputs that could come in pretty fast you might want to track whether or not the filter is already running with a state variable and set it when querying / unset it when done so you don’t get multiple filter() calls executing at the same time.