Adding search and filter options to my resources page

Ask the community
, ,
1

Hi team,

Aim: I am looking for some help adding search and filter options to the resources page of my website exactly like the one in this Wix video.

Context:
I would like to set up a page that hosts all our organisations resources from which visitors to our site can search for a resource (eg; annual report) or filter results (eg report, submission etc). I have watched this video and read implemented code from this article that Wix recommends. I have also attempted to use the code from this forum post. I have also found Code Queen’s videos really helpful ( ‘Add search function to Wix Form’ and ‘Conditional Filtering Dropdowns’ ).

However as a newbie to coding I haven’t had any success as of yet so thought I would reach out for some help.

Where I am up to:
I have successfully added in a repeater and linked this to a data set called ‘Resources’. When I click on a resource the document opens up. Everything is all working in the repeater as it should. Happy with this.

The problems come when I try to get search results or the options in the filter to show in the repeater using code. I have tried following all the resources above to write the code. The code below is based off this article and is the code I currently have on my resources page. I am beginning to think as I am using a repeater and not a table this might be the problem? I understand that the red dots indicate errors in my current code.

Current Code (See image attached):

import wixData from “wix-data”;

export function searchButton_click(event) {
// Runs a query on the “resources” collection
wixData.query(“Resources”)
// Query the collection for any items whose “Name” field contains
// the value the user entered in the input element
.contains(“title”, $w(“#search).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(”#repeater1").rows = res.items;
});

}

$w.onReady( function () {
$w(“#resultsTable”).columns = [{
“id”: “col1”,
“dataPath”: “title”,
“label”: “title”,
“type”: “string”,
}, {
“id”: “col2”,
“dataPath”: “ResourceType”,
“label”: “ResourceType”,
“type”: “string”,
}, {
“id”: “col3”,
“dataPath”: “Description”,
“label”: “Description”,
“type”: “string”,
}];
});

export function resource_change(event) {
// Runs a query on the “Resources” collection
wixData.query(“Resources”)
// Query the collection for any items whose “Name” field contains
// the value the user selected in the dropdown
.contains(“ResourceType”, $w(“#resource”).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(“#repeater1”).rows = res.items;
});
}

Details:
Search input type: #search
Filter input type: #resources
Repeater type: #repeater1

Image screenshots attached of:
-Database:Resources
-Current editor page
-Current preview page
-Current code

I have been working on this for a few days now so would very much appreciate some advice.

Thank you!

Kind regards,

Maddie

1896×914 111 KB

1105×826 53.9 KB

1901×987 201 KB

1898×918 134 KB

2

You are correct. The problem is because you are “using a repeater and not a table”.

This line of code:
$w(" #repeater1 ").rows = res.items;
Should be something like this:
$w(" #repeater1 ").data = res.items;

You will also need an onItemReady() event handler which is called when new items are added to the repeater (which is what setting the Repeater.data property does) The onItemReady() function populates the components in a Repeater item so that it can be rendered.

3

Thank you for your help Yisrael. Much appreciated.

I have changed the line of code to $w(" #repeater1 ").data = res.items; and added in the onItemReady() from the link provided.

Unfortunately the code still isn’t working. When I preview the site, and type or try to ‘sort by resource’ in the filter dropdown nothing happens. Please see my full code below. Not quite sure what I am doing wrong and I have spent so much more time on this then hoped.
Doesn’t this video from Wix use repeaters? Wix Code | How to Create a Search for Your Database - YouTube

Thank you!

Current code:

import wixData from “wix-data”;

export function searchButton_click(event) {
// Runs a query on the “resources” collection
wixData.query(“Resources”)
// Query the collection for any items whose “Name” field contains
// the value the user entered in the input element
.contains(“title”, $w(“#search”).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(“#repeater1”).data = res.items;
});

}

$w(“#repeater1”).onItemReady( ($item, itemData, index) => {
let repeatedElement = $item(“#repeatedElement”);
let nonRepeatedElement = $item(“#nonRepeatedElement”);
let itemDataValue = itemData.someProperty;
let isEvenItem = index % 2 == 0;
});

$w.onReady( function () {
$w(“#repeater1”).data = res.items;
“id”: “col1”,
“dataPath”: “title”,
“label”: “title”,
“type”: “string”,
}, {
“id”: “col2”,
“dataPath”: “ResourceType”,
“label”: “ResourceType”,
“type”: “string”,
}, {
“id”: “col3”,
“dataPath”: “Description”,
“label”: “Description”,
“type”: “string”,
}];
});

export function resource_change(event) {
// Runs a query on the “Resources” collection
wixData.query(“Resources”)
// Query the collection for any items whose “Name” field contains
// the value the user selected in the dropdown
.contains(“ResourceType”, $w(“#resource”).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(“#repeater1”).data = res.items;
});
}

4

@communications I’m sorry but your code has a number of errors in syntax, semantics, and logic. Please realize that you can’t just “copy and paste” code and expect it to work. You need to understand what the code is doing, how it’s doing it, and why it’s doing it. You will need to learn the basics of programming if you expect to be able to write code that does what you want.

I would suggest visiting the following sites for information on programming in Wix Code and Javascript:
https://support.wix.com/en/wix-code/wix-code-basics
https://www.w3schools.com/js/default.asp
https://javascript.info

You can also play around with the examples:
https://support.wix.com/en/article/wix-code-index-of-examples
https://www.wix.com/code/home/examples
https://www.grampsworkbench.com/examples

We are happy to get you pointed in the right direction, and as questions or difficulties arise, we are here to help.

Good luck and have fun with your learning adventure.