Search function for a repeater

Hi all,
I’m using a repeater connected to my database. I have a search bar and I am using code from the video on “how to create a search for your database”. But when I go in preview and try to search for something nothing will show up and when I click out of the search bar borders of the search bar get red.

1. How could I code to make the search bar look for values in columns Title and Description in database?

2. Furthermore, In case there would be many findings how could I set that only 30 results will be shown per page please?

I am currently using code that is below, but it is not functional:

import wixData from “wix-data”

let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value);
}, 200);
}

let lastFilterTitle;
function filter(title) {
if (lastFilterTitle !== title) {
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘Title’, title));
lastFilterTitle = title;
}
}

Looking forward to your tricks and tips! Thank you!
Karel

Hi Karel,
I would start with following the example I wrote here for filtering a repeater. If you have any further questions about the example, let me know :slight_smile:

Best,
Tal.

1 Like

Thank you so much! I am going to go through it! Thanks a lot!

Best,
Karel

Hi Tal,

I tried to code today, but it does not work yet. I used something from the code you referred to and something from the video I mentioned above. You can see my code below .

Right now if I type something into the Search bar everything disappears and when I click out of the Search bar the borders get red. Wix tells me this : " Wix code SDK Warning: The src parameter of “image4” that is passed to the src method cannot be set to null or undefined. "

My attributes:
Repeater = #repeater1
Search bar = #iTitle
Picture = #image4
Text = #text19
Dataset = #dataset1

Still, I would like to have a Search bar that would get me 30 results per page. What do you think I could do next, please? If you had any time to help I would appreciate it! Thank you in advance!

My code:
import wixData from ‘wix-data’;

let originalPropertiesInfo = ;
$w.onReady( function () {
//Query to get the information from the database
wixData.query(“Properties”)
.find()
.then((results) => {
originalPropertiesInfo = results.items;
$w(#repeater1).data = originalPropertiesInfo;
})
. catch ((err) => {
let errorMsg = err;
});
//Set the information to the repeater
$w(‘#repeater1’).onItemReady(($w, itemData) => {
//add here all the relevant elements of the repeater //In this case, I’ve added a text and an image to the repeater
$w(‘#text19’).text = itemData.title;
$w(‘#image4’).src = itemData.images;
});
});

let debounceTimer;
export function iTitle_keyPress(event, $w) {
$w(‘#repeater1’).data = lastFilterTitle;
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value);
}, 200);
}

let lastFilterTitle;
function filter(title) {
if (lastFilterTitle !== title) {
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘Title’, title));
lastFilterTitle = title;
}
}

Best regards,
Karel