Graveyard mega search

I’m currently working alongside a church with a large graveyard. They currently have all their graveyard records in a PDF, but is looking to display them on their site with a mega search.

Context
For a bit of context, there are around 4500 records that they want to display, so I’m looking to set up a filter system to allow users to find information, without having to trawl through all the records. Currently have someone putting all of the information from the PDF into a CSV. It will all be displayed in a repeater, with a card for each person. Each set of data in the repeater is linked to the database. I am struggling to decide if using a pagination or something else would help with the amount of data.

For each record, there is the following information attached:
First Name
Last Name
Age
Date Died
Residence Parish
Date of Burial
Mode (Burial/Cremation)
Grave Number/Area
Rank
Interned By
Grave Info
Remarks

This is what I want to be able to filter on each piece fo information:
First Name + Last Name (If someone searches the name then everything else is filtered out)

Age (Using a slider, only records with that age are displayed)

Date Died (I would like to implement something where 2 dates are selected, and any record with a date between the 2 chosen is displayed)

Residence Parish (Nothing)

Date of Burial (I would like to implement something where 2 dates are selected, and any record with a date between the 2 chosen is displayed)

Mode (Burial/Cremation) (Dropdown to choose between displaying burial/cremation)

Grave Number/Area (Nothing)

Rank (Nothing)

Interned By (Dropdown to choose the person who conducted the funeral etc.)

Grave Info (Nothing)

Remarks (Nothing)

I would love it if people could choose all of this information, and then press a button for it to filter, rather than it filtering as they are choosing what to filter.

Obviously a button to clear all of the information would be helpful.

I have currently managed to set up a search that will search the database and filter accordingly. The only problem I currently face is that if someone tries searching for first name and last name, then nothing appears.

import wixData from 'wix-data';
 
let debounceTimer;
 
export function Search_keyPress_1(event) {
 
$w("#Search").value;
 
    if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
        filter($w("#Search").value);
    }, 200);
 
}
 
let searchWord;
 
function filter(search) {
    if (searchWord !== search) {
        $w("#graveRecords").setFilter(wixData.filter().contains('firstName', search)
        .or(wixData.filter().contains('lastName', search)));
        searchWord = search;
    }
 
}

Any help/advice would be greatly appreciated. I know this sounds like a lot.

Hi there :wave:t2: Have you seen these examples?
https://www.wix.com/velo/example/mega-search
https://www.wix.com/velo/example/multiple-filter-methods

With some tweaking it looks like they will get you very close to your desired functionality.

Hey :wave:

Thanks for those! I had already seen the mega search example, but not the multiple filter methods.

The multiple filter methods has helped.

At the moment, I am able to filter all the elements that I want individually. So, I can filter by age, I can search, I can filter by alphabetical etc.

The problem I face is getting them to work together.

Having only begun looking at code a couple of weeks ago, I am pretty proud of where I have come to, but still a little way off from completing this project