Filtering Repeater

I have a repeater connected a “Restaurants” dataset. I have the name of each restaurant with a column for description, location, phone, logo, url and type.

Of course, my dataset has more than one restaurants for each “type”.

How do I allow a user to “filter” the “repeater” by “type”?

Example: Someone selected “Steakhouses” only businesses that matches that “type” would show in the repeater.

I know this is something very simple, but I am new to Wix Code. Any help would be greatly appreciated.

Hi Charles,

The issue is not really so much filtering a repeater, as it is filtering the collection (database) query. All you need to do is to add a filter to the query, and the results will then have the restaurant types that you want.

Yisrael

Hi! You can change filter straight for the dataset
Use this code for reference:

import wixData from "wix-data";

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

$w.onReady(function () {
	$w("#button1").onClick(()=>{
		$w("#dataset1").setFilter(wixData.filter()
			.eq("type", $w("#selection1").value));
	});
});

Here i’m adding filter to the dataset “#dataset1” by clicking on “#button1” button
I’m filtering by field “type”, taking value for filtering from value of dropdown “#selection1

2 Likes

Guys I am a complete novice to code,

This is what I have entered:
import wixData from “wix-data”;
// For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady(function () {
//TODO: write your page related code here…
$w.onReady(function () {
$w(“#button1”).onClick(()=>{
$w(“#dataset2”).setFilter(wixData.filter()
.eq(“type”, $w(“#selection1”).value));
});
});

Hi Charles,

There is only need for one onReady function:

import wixData from 'wix-data';
	
$w.onReady(function () {
	$w("#button1").onClick(() => {
		$w("#dataset2").setFilter(wixData.filter()
		.eq("type", $w("#selection1").value));
		});		
	});

Find out more about onReady here

Do I just add a button or a drop down box for “user input”?

A step by step would be very helpful. Since I am new to coding, I have zero frame of reference. Thanks in advance.

import wixData from “wix-data”;
$w.onReady(function () {
$w(“#button1”).onClick(()=>{ $w(“#dataset1”).setFilter(wixData.filter()
.eq(“type”, $w(“#selection1”).value));
});
});

Hi Charles,

You’ll need a button labeled ‘Filter’ and a dropdown box for user input.

Change the element’s ID to match ‘filterButton’ and ‘userInputDropdownBox’. I made changes to the code to better illustrate the variables meaning.

In the code below we attach an onClick event to the ‘filterButton’, when clicked, it sets a filter on ‘dataset2’, on column ‘type’ and using the value from the ‘userInputDropdownBox’.

import wixData from 'wix-data';
	
$w.onReady(function () {
	$w("#filterButton").onClick(() => {
		$w("#dataset2").setFilter(wixData.filter()
		.eq("type", $w("#userInputDropdownBox").value));
		});		
	});

Feel free to search the forum, a few similar questions were asked in the past.

Hi all, I’ve been able to look over the forums and get lots of help thus far but have now hit a dead end. I’m in the exact same situation as Charles, However i can’t seem to get this to work. when I’ve entered this code my repeater is coming up blank. Please help.

1 Like

I got this to work. See my code below and explanation.

import wixData from ‘wix-data’;
$w.onReady(function () {
//TODO: write your page related code here…
$w(" #button4 “).onClick(() => {
$w(” #dataset1 “).setFilter(wixData.filter()
.eq(” country “, $w(” #dropdown1 ").value));
});
});

  1. I added a button and left the label as default #button4
  2. I added the database dataset and left the label as #dataset1 - note you need to use the label ID and within the #dataset1 connect to your database
  3. I am filtering on a field named Country - note however that you must use spell the field name all in lowercase e.g. in this case country NOT Country… if you don’t the filter will NOT work.
  4. I added a drop down list, used the default label ID and entered the labels and values manually #dropdown1 e.g. a drop down list entry for each country … United Kingdom, France, Germany etc…

NOTES:
Don’t forget to Sync your Sandbox to LIVE !
You DO NOT connect the Button or Drop-down list to the #dataset - that is what the above code does.
All references (in bold in example above) must be in lowercase
If you need more help you can contact me at info@coboshub.com

What if I just wanna filter a button instead of the entire repeater?

Novice here…if I have several filters, can user select each to further refine search. In other words, if they select say city in first filter search, and then restaurant in second search area…will this keep refining the search, or do the searches only work one at a time?

Hi,
I want to use search function in Repeater activity based on my search key . When I have used below code Its showing all the records for first time . I dont want to show all the records instate off only the record based on search key . Can you please help me .

Below code I have used but its not working .
import wixData from ‘wix-data’;
$w.onReady(function () {
//TODO: write your page related code here…
$w(“#searchButton”).onClick(() => {
$w(“#dataset1”).setFilter(wixData.filter()
.eq(“orderNumber”, $w(“#textInput1”).value));
});
});

Hello, I too can’t get this to work. I have a repeater displaying team members with image and bio text. I have added a dropdown which should be able to display all available names in the database, and upon selection of one of these the repeater should show only the items linked to that name.

When simply linking the dropdown to the collection through the built-in feature I get a list of all names, and upon click the top repeater item displays the selected name, but does not change the other information (image, text etc). Also, the other names in the dataset are still visible below.
When I apply the below code to the dropdown (disabling the other connections to collection), it displays no names at all.

Please help, I am obviously completely new to this… Thanks!

import wixData from 'wix-data';

export function dropdown1_change(event, $w)
 {
 //Add your code for this event here: 
$w.onReady(function () {
 //TODO: write your page related code here...
    $w("#dropdown1").onClick(() => {
        $w("#dataset1").setFilter(wixData.filter()
        .eq("name", $w("#dropdown1").value));
        });     
    });

}

You are an angel. Thank you.

1 Like

Did anyone found a solution for this?
I have watched the tutorial video a lot of time?
The filtering works but the second dropdown shows all the available text from the database,when according this code should show only the relevant/matching text from the database,however is showing everything,i have the same code as everyone above?

Tried on ready or on click,no difference

Old post being closed.