Hide Repeater and count until search is initiated.

Ask the community
,
1

Hi

Hope someone can help with something that I can’t manage to get working. I am trying to hide the repeater and count function until the search bar is used. I have tried a few pieces of code, but none seem to work for me. Any help with the code would be greatly appreciated.

Many Thanks
Chris

The code I have:

import wixData from ‘wix-data’;

let debounceTimer;

$w.onReady(() => {

$w("#searchBar").onKeyPress(function () { 

    $w("#image6").show(); 

    $w("#searchBar").value; 

    if (debounceTimer) { 
        clearTimeout(debounceTimer); 
        debounceTimer = undefined; 
    } 
    debounceTimer = setTimeout(() => { 
        filter($w("#searchBar").value); 
    }, 200); 

})

//COUNT SEARCH FUNCTION
function countItems() {
let count = $w(“#dataset1”).getTotalCount()
count > 0 ? $w(“#textResults”).text = ${count} Eateries : $w(“#textResults”).text = No Eateries Found 😥;
return countItems;
}
//LOAD COUNT WHEN DATASET IS READY
$w(“#dataset1”).onReady(function () {
countItems();
});
// CLEAR SEARCH CODE
$w(‘#image6’).onClick(() => {
$w(“#searchBar”).value = undefined
$w(“#dataset1”).setFilter(wixData.filter()).then(countItems())
$w(“#image6”).hide();
})
})
2

Hi,

Rather than showing and hiding the entire repeater, you’ll want to collapse() and expand() the repeater depending on whether your dataset has objects inside of it (after the user commences a search by typing into the Text Input Field).

Check out the following Velo Example for more details on how to implement this.

3

Thank you so much!!

4

I followed your advice and it worked a treat! The mobile version automatically deleted the space when the repeater is collapsed. The desktop version still has the blank space there. Any ideas? Thanks