Search function for a repeater

Ask the community
,
21

Hope you didn’t mind, the reason I liked the code for your site you referenced is because it looked like you had a functioning next page feature for it. I’ve used the generic code before and couldn’t tie in a working prev page and next page, meaning if I set limit to 5 and have 15 results, when I hit next page button it was no longer part of the 15 query results but just random results. I’ve read the reference stuff before but seems very generic and poor in practicality for specific examples.

The code you fixed for me didn’t work, no errors but didn’t filter anything. I suspected it was missing a #repeater1 results.items function so I added it along with a limit function but it’s still not filtering. You’ve been a tremendous help I appreciate it.

import wixData from ‘wix-data’;

let lastFiltersearch
let debounceTimer

$w.onReady( function () {
//TODO: write your page related code here…
});

function update() {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#searchBar’).value);
}, 200)
}

export function searchBox_keyPress(event, $w) {
update()
}

function filter(search) {
let totalResults = 5 // displays total of 5 rather then 50 default
if (lastFiltersearch !== search) {
wixData.query(‘CATegory’)
.contains(‘search’, search)
.or(
wixData.query(‘CATegory’)
.contains(‘caTegory’, search)
)
.or(
wixData.query(‘CATegory’)
.contains(‘mOrF’, search)
)
.or(
wixData.query(‘CATegory’)
.contains(‘county’, search)
)
.limit(totalResults)
.find()
.then((results) => {
//the results are in filterData.items
$w(‘repeater1’).data = results.items;

})
. catch ((err) => {
console.log(err);
})

}
}

22

Oh my bad.Thats becuase the repeater doesn’t know what to do with that data. It has it all but doesnt know how to display it.

Add this into the $w.onReady where it says
page code goes here

$w(“#repeater1”).onItemReady( ($item, itemData, index) => {
$item(“#myRepeatedText”).text = itemData.textField;
} );

Replace myRepeatedText with element in the repeater

ItemData is results.items[indexId]’ so to get data from the dataset its itemData.the-id-of-field-in-dataset
To link more items in the repeater use $item(“# not $w(”#

The limit to repeaters currently is lag and only will display 50 items at a time without some code to add pages or append more data

23

Dragos:

I helped another user out with a similar problem to this. One of the problems they had (and I think you might to) is they were using wix data AND wix dataset to try to managed their repeater Items in the search. This will lead to a bad result (as you are experiencing). What you probably need to do is use the search code that you have used from Ethan in a dataset.setFilter() statement. Then what you will see is that the repeater will only display the search results AND you should be able to page through the results correctly. If you don’t have a dataset attached to the repeater then you will need to manage the result set and paging by changing the repeater .data array with a page length of results that you pull from the wix data result set.

Hope this helps

24

Ethan, doesn’t filter anything and is throwing an error on line 21, export function searchBox_keyPress(event, $w) {

import wixData from ‘wix-data’;

let lastFiltersearch
let debounceTimer

$w.onReady( function () {
$w(“#repeater1”).onItemReady( ($item, itemData, index) => {
$item(“#text48”).text = itemData.textField;
} );

function update() {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#searchBar’).value);
}, 200)
}

export function searchBox_keyPress(event, $w) {
update()
}

function filter(search) {
let totalResults = 5 // displays total of 5 rather then 50 default
if (lastFiltersearch !== search) {
wixData.query(‘CATegory’)
.contains(‘search’, search)
.or(
wixData.query(‘CATegory’)
.contains(‘caTegory’, search)
)
.or(
wixData.query(‘CATegory’)
.contains(‘mOrF’, search)
)
.or(
wixData.query(‘CATegory’)
.contains(‘county’, search)
)
.limit(totalResults)
.find()
.then((results) => {
// the results are in filterData.items
// $w(‘repeater1’).data = results.items;

})
. catch ((err) => {
console.log(err);
})

}
}

25

stcroppe,
Thanks for your suggestion I appreciate it. I’m having a difficult time implementing your dataset.setFilter() statement suggestion into the code. Any chance you can reference the link to the solution that you mentioned. Currently I do have a dataset connected to the repeater, but I assumed that Ethan’s code is filtering straight from wix-data database and not the dataset, and regurgitating the results into the repeater which is the goal.

26

Dragos:

I’ll post another suggestion tomorrow if you are still stuck.

The error you are having is because the onReady function is incorrect. This

$w.onReady(function () {
$w("#repeater1").onItemReady( ($item, itemData, index) => {
$item("#text48").text = itemData.textField;
} );

Should look like this

$w.onReady(function () {
    $w("#repeater1").onItemReady( ($item, itemData, index) => {
        $item("#text48").text = itemData.textField;
     } );
});

You may also have an extra } at the end of the page code.