Search function for a repeater

I’m using a repeater connected to my database. I have a search bar and am using code from the video on “how to create a search for your database”. The problem I have is i want to be able to search for two elements from my database not just one. It can be one or the other not both together. For example, search ‘title’, or search a ‘category’. Here’s my code which only allows me to search for ‘title’ but not ‘category’. Thanks.

import wixData from “wix-data”;

export function searchBar_keyPress(event, $w) {
console.log($w(‘#searchBar’).value);
filter($w(‘#searchBar’).value);
}

function filter() {
$w(‘#dataset1’).setFilter(wixData.filter()
.contains(“title”, $w(“#searchBar”).value));

}

Hi,
Please review the example written in this thread regarding filtering a repeater using code.

Good luck,
Tal.

Hi Tal,
I greatly appreciate the reply and the solution to my problem. I have two concerns with the code you referenced in that’s post. The first is the use of drop downs, my ‘town’ element alone has close to 60 different types and growing. I don’t think that would be too practical on a drop down feature with that many. The second is I’ve tried a similar code to yours and found that it defaults to 50 results . When I added a .limit(10) for example it limited the result to 10 but when I hit next page to go the then next results it no longer filtered and just showed random 10 results.

Is it possible to use your code but have one search input and no drop downs, while searching for more than 1 element with a filter limit of let’s say only 10 per page being that the results are image heavy. Much appreciated thank you.

If you want to check multiple fields at the same time use the OR operation

import wixData from "wix-data";

export function searchBar_keyPress(event, $w) {
console.log($w('#searchBar').value);
filter($w('#searchBar').value);
}

function filter() {
$w('#dataset1').setFilter(
    wixData.filter()
    .contains("title", $w("#searchBar").value)
    .or(
        wixData.filter()
        .contains("catagory", $w("#searchBar").value)
    )
);
}

Hope this solves your problem :slight_smile:

1 Like

Ethan that worked perfectly thank you so much. Suppose I wanted to combine the search to allow by ‘title’ AND ‘category’ in one search, for example anything with “town A” and “Black” come up in the search query. any suggestions? thanks again

replace .or( with .and(

(this below would work if you had 2 search bars)

function filter() { 
$w('#dataset1').setFilter( 
wixData.filter() 
.contains("title", $w("#searchBar1").value) 
.and( wixData.filter() 
.contains("catagory", $w("#searchBar2").value) 
) 
); 
} 
1 Like

that’s fine i can do that, but how do i tie in a on click event and have an actual search button so its not an on keypress since that probably wont work with two search bars?

your awesome. it worked perfectly. and the search button removed the lag that onkeypress creates. I can’t thank you enough.

Suppose down the line I wanted one search input to handle multiple fields in the database would that even be possible or i’d always need either a drop down or an additional key input like you showed me just now?

i do it on my site with 5 fields linked to 1 input you can keep expanding it as much as you need

also the onKeyPress lag can be reduced with a timer

let debounceTimer
function update() {
 if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
        filter($w('#searchBox').value);
    }, 200);
}
export function searchBox_keyPress(event, $w) {
    update();
}
function filter(title) { 
//data search code with title holding the value of the searchbox
}

the 200 can be increased to any number. It causes the search to only happen X milliseconds after the user has stopped typing

2 Likes

that’s excellent, you saved me countless hours with this solution. I hope these solutions you provided will help others with similar situations.

1 Like

I’m pretty sure I am missing something, tried different variations but no success. Any advice?

Remove export

tried that earlier and caused a different error point at the end, also did not do any filtering at all

You are missing a closing bracket i think for searchbox_keypress

added that and caused even more errors

paste the actual code instead of a picture?

import wixData from ‘wix-data’;

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

function filter(title) {
let totalResults = 5 // Number of results per page, default is 50
if (String($w(‘#PerPage’).value)) { totalResults = Number($w(‘#PerPage’).value ) } // requests per page dropdown

if (lastFilterTitle !== title) {
wixData.query(‘CATegory’)
.contains(‘title’,title)
.or(
wixData.query(‘CATegory’)
.contains(‘caTegory’,title)
)
.or(
wixData.query(‘CATegory’)
.contains(‘mOrF’,title)
)
.or(
wixData.query(‘CATegory’)
.contains(‘county’,title)
).limit(totalResults)
.find()

    .then((filterData) => { 
        $w('repeater1').data = filterData.items 
        updatecount() 
        totalPages = Math.ceil(filterData.totalCount / totalResults) 
        oldResults = filterData 
        $w('#Page').text = "1 / " + totalPages 
        $w('#Page2').text = "1 / " + totalPages 
    }) 
    . **catch** ((err) => { 
        console.log(err); 
    }); 
    getSheets(title,totalResults).then( 
        (filterData) => { 

        }) 
} 

}}

I added the ) after the } for line 12 but giving me an error for that line now saying, unexpected token )
…it got rid of all the other errors though

you were using the code i wrote for my site.
This should work for you. also here is a reference page for syntax and the data in results

 
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) {
 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)
            )
            .find()
            .then((results) => {
 //the results are in filterData.items 

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

    }
}