connecting a repeater to a search bar (live example)

We learnt already how to create a search bar in one of the previous section, but in this tutorial we will show you a live example using our Database Properties.

​

For this example we will need the following items:

​

- Repeater

- Text input field (search bar)

- Dataset

​

​

Repeater ID: repeater1

Search Bar ID: searchBar

Dataset ID: dataset1

​

Your page should look like this example below. Note that we connected already each element inside the repeater to its field in Database, if you do not remember how to connect items to the dataset, check this tutorial by Wix official site.

As you can see, the search bar is filtering two items in Database (country and city), then once the search bar is empty, it filters back all the results.

Paste the following code and activate the onKeyPress event for the searchBar.

​

import wixData from "wix-data"

​

$w.onReady(function() {

})

let debounceTimer;

export function searchBar_keyPress(event) {

    if (debounceTimer) {

        clearTimeout(debounceTimer);

        debounceTimer = undefined;

    }

    debounceTimer = setTimeout(() => {

        $w("#dataset1").setFilter(wixData.filter().contains("city", $w('#searchBar').value)

            .or(wixData.filter().contains("country", $w('#searchBar').value)));

    }, 200);

}

​

Your code should look like the picture below

connecting a repeater to a search bar and a dropdown (live example)

In this tutorial we will show you how to filter items in a repeater by a dropdown and a search bar.

The dropdown will be linked to our country field and we will connect it by using our previous code (how to add options to a dropdown from database)

​

For this example we will need the following items:

​

- Repeater

- Text input field (search bar)

- Dropdown

- Dataset

​

​

Repeater ID: repeater1

Search Bar ID: searchByCity

Dropdown ID: dropdownCountry

Dataset ID: dataset1

​

Your page should look like this example below. Note that we connected already each element inside the repeater to its field in Database, if you do not remember how to connect items to the dataset, check this tutorial by Wix official site.

or

As you can see, this time the  search bar is filtering only one item in Database (city), then we have the dropdown that lists the country field and filters indeed the repeater by countries .

Paste the following code and activate the onKeyPress event for the searchBar and the onChange event for the countryDropdown

​

import wixData from "wix-data"

​

$w.onReady(function() {

    wixData.query("Properties").ascending("country")

        .find()

        .then(results => {

            var uniqueList = createUniqueList(results.items);

            $w("#dropdownCountry").options = buildOptions(uniqueList);

        });

    function createUniqueList(items) {

        var titlesOnly = items.map(item => item.country);

        titlesOnly.sort();

        return [...new Set(titlesOnly)];

    }

    function buildOptions(uniqueList) {

        var uniqueListFinal = uniqueList.map(curr => {

            return { label: curr, value: curr };

        });

        uniqueListFinal.unshift({ "label": "All", "value": "" });

        return uniqueListFinal

    }

    })

let debounceTimer;

export function searchByCity_keyPress(event) {

    $w("#dropdownCountry").selectedIndex = undefined;

    if (debounceTimer) {

        clearTimeout(debounceTimer);

        debounceTimer = undefined;

    }

    debounceTimer = setTimeout(() => {

        $w("#dataset1").setFilter(wixData.filter().contains("city", $w('#searchByCity').value));

    }, 200);

}

export function dropdownCountry_change(event) {

let countryValue = $w("#dropdownCountry").value;

if (countryValue === "") {

    $w("#dataset1").setFilter(wixData.filter())

} else {

    $w("#dataset1").setFilter(wixData.filter().eq("country", countryValue));

}

}

​

multiple search filter using dropdown, loading gif and a reset option (live example)

In this example we will show you how to create a beautiful multiple filter which includes:​

​

Loading Gif

Reset Filter option

Text for counting the results

Format Price to Dollar

Dropdown for country

Dropdown for city

Dropdown "Price from"

Dropdown"Price To" 

Repeater

​

For this example we will need the following items:

​

- Repeater

- 4 Dropdown

- Dataset

- Loading Gif (download here)

- 2 Text ( 1 for counting the results and the other to Reset the filters )

​

​

​

Repeater ID: repeater1

Dataset ID: dataset1

Dropdown for country ID: countryDP

Dropdown for city ID: cityDP

Dropdown Price From ID: priceFromDP

Dropdown Price To ID: priceToDP

Loading Gif ID: loadingGif

Text for Results ID: totalResults

Reset Text ID: resetText

​

*** IMPORTANT ***

Since we need to format the price field into a $ value, we MUST NOT connect the price field using the Dataset but we will connect it using code only.

​

Your page should look like this example below.

5 results were found.

To make this filter working exactly this way, remember to:

​

- Activate the onItemReady event for the repeater, DO NOT connect the price field to the repeater using Dataset but only via code and hide the Loading Gif and the Reset Text both on load

Once done paste this code:

​

import wixData from "wix-data"

​

$w.onReady(function() {

populateCountryDP();

populateCityDP();

    $w('#dataset1').onReady(() => {

        count();

        $w('#countryDP , #cityDP , #priceFromDP , #priceToDP').onChange(() => {

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

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

            search();

        })

        $w('#resetText').onClick(() => {

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

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

            $w('#countryDP , #cityDP , #priceFromDP , #priceToDP').value = "";

            $w('#dataset1').setFilter(wixData.filter())

                .then(count);

        });

        function search() {

            //$w("#loadingGif").show();

            let filter = wixData.filter();

            let country = $w("#countryDP").value;

            let city = $w("#cityDP").value;

            let priceFrom = Number($w("#priceFromDP").value);

            let priceTo = Number($w("#priceToDP").value);

            if (country && country !== "") {

                filter = filter.eq("country", country);

            }

            if (city && city !== "") {

                filter = filter.eq("city", city);

            }

            if (priceFrom && priceFrom !== "") {

                filter = filter.ge("price", priceFrom)

            }

            if (priceTo && priceTo !== "") {

                filter = filter.le("price", priceTo)

            }

            $w('#dataset1').setFilter(filter)

                .then(count);

        }

        function count() {

            let total = $w('#dataset1').getTotalCount();

            if (total > 1) {

                $w('#totalResults').text = `${total} results were found.`;

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

            } 

            if (total === 1) {

                $w('#totalResults').text = `${total} result was found.`;

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

            } 

            if (total === 0) {

                $w('#totalResults').text = "No result found!";

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

            }

        }

    });

});

export function repeater_itemReady($item, itemData, index) {

    let currentPrice = itemData.price;

    let newPrice = "$" + formatNumber_AsDollar(currentPrice);

    $item("#priceRepeater").text = newPrice;

    }

function formatNumber_AsDollar(x) {

    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

}

function populateCountryDP (parameter) {

    wixData.query("Properties").ascending("country")

        .limit(1000)

        .find()

        .then(results => {

            const uniqueItems = getUniqueItems(results.items);

            $w("#countryDP").options = buildOptions(uniqueItems);

        });

    function getUniqueItems(items) {

        const itemsOnly = items.map(item => item.country);

        return [...new Set(itemsOnly)];

    }

    function buildOptions(uniqueList) {

        return uniqueList.map(curr => {

            return { label: curr, value: curr };

        });

    }

}

function populateCityDP (parameter) {

    wixData.query("Properties").ascending("city")

        .limit(1000)

        .find()

        .then(results => {

            const uniqueItems = getUniqueItems(results.items);

            $w("#cityDP").options = buildOptions(uniqueItems);

        });

    function getUniqueItems(items) {

        const itemsOnly = items.map(item => item.city);

        return [...new Set(itemsOnly)];

    }

    function buildOptions(uniqueList) {

        return uniqueList.map(curr => {

            return { label: curr, value: curr };

        });

    }

}

​

See another live example here

connect items in repeater using code only

In this tutorial we will show you how to connect a repeater using code and not a Dataset as usual.

This feature is required especially when we want to edit some or all info in our repeater.

​

So the very first thing to do is to add a repeater and connect it to our Dataset but this time we won't connect any elements inside the repeater.

​

Once you added the repeater and linked to your Dataset, then activate the onItemReady event for the Repeater

​

Now, remember that we are taking our Properties Database as example, so we have the following fields:

​

- country

- city

- description

- image

- price

​

​

Now, once you activated the onItemReady event for the repeater, paste this code inside:

​

$w.onReady(function() {

});

export function repeater1_itemReady($item, itemData, index) {

        $item('#countryRepeaterItem').text = itemData.country;

        $item('#cityRepeaterItem').text = itemData.city;

        $item('#descriptionRepeaterItem').text = itemData.description

        $item('#imageRepeaterItem').src = itemData.image;

    }

​

​

As you can see tis time instead of using $w we are using $item, this syntax is mandatory whenever we are working with elements inside the repeater.

​

See the example below as reference