Create a searchbar for collections in wix studio

Ask the community
, , , ,
1

Question:
How can I add custom searchbar with input element for dynamic pages in Wix studio?

Product:
[ Wix Studio.]

I’ve been making a custom Blog page that will has a CMS collection named note posts in wix studio. Wixidea “the youtuber that uploaded the solution for wix editor and editor X” but his code seems not to work in WIx Studio.
Example code:
import wixData from ‘wix-data’;

let debounceTimer;

$w.onReady(() => {

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

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

    $w("#searchInputID").value;

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

})

let searchWord;

function filter(search) {
    if (searchWord !== search) {
        $w("#datasetID").setFilter(wixData.filter().contains('fieldkey1', search)
                .or(wixData.filter().contains("fieldkey2", search))
                //Insert more field filter here ====> here <====
            )

            .then(countItems)
        searchWord = search

    }

}

//COUNT SEARCH FUNCTION 🚀
function countItems() {
    let count = $w("#datasetID").getTotalCount()
    count > 0 ? $w("#countTextID").text = `${count} Restaurants` : $w("#countTextID").text = `No Restaurants Found 😥`;

    return countItems;
}

//LOAD COUNT WHEN DATASET IS READY 🎉
$w("#datasetID").onReady(function () {
    countItems();
});

// CLEAR SEARCH CODE 🎉
$w('#xIconID').onClick(() => {

    $w("#searchInputID").value = undefined
    $w("#datasetID").setFilter(wixData.filter()).then(countItems())

    $w("#xIconID").hide();

})

})

(*the main problem is the datasetID. Wix studio has different dataset style and doesn’t appear as element like in classic editor and editor X. )

2

Dataset ID’s are available in Wix Studio, but the flow to get to them is a bit different.

In the editor, when you click on your CMS connections, you will see linked text called “Dataset Settings”

settings
settings510×1050 41.8 KB

When you click on this, open your code panel and the ID will be there as generated and you can change it to something more meaningful.

id
id856×950 83 KB

3

Thanks a lot. It worked.

1 Like