Welcome Text
You're not eligible to view this page. Click here to access this course
understanding repeaters
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.
Property
Rome
Kitchen Picture, Rome Italy
From:
320000
Property
Tokyo
Living Room Photo in Tokyo's House
From:
400000
Property
New York
Apartment in NY
From:
300000
Property
London
Modern Urban apartment in London
From:
250000
Property
Paris
Beautiful House in Paris
From:
200000
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
Property
Rome
Kitchen Picture, Rome Italy
From:
320000
Property
Tokyo
Living Room Photo in Tokyo's House
From:
400000
Property
New York
Apartment in NY
From:
300000
Property
London
Modern Urban apartment in London
From:
250000
Property
Paris
Beautiful House in Paris
From:
200000
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.
Reset filters
Property
Rome
Kitchen Picture, Rome Italy
From:
$550
Property
Tokyo
Living Room Photo in Tokyo's House
From:
$550
Property
New York
Apartment in NY
From:
$550
Property
London
Modern Urban apartment in London
From:
$550
Property
Paris
Beautiful House in Paris
From:
$550
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
