Searching within a specific field in data collection using a dropdown menu?

Ask the community
,
1

Hello,

I’m trying to create a kind of online dictionary with a data collection “Glossary Terms” that includes a “Title” field and a “Definition” field.

916×782 42.7 KB

I was able to create a search bar (with a loading image and text element that specifies # of results) that filters the data in a repeater, to my satisfaction.

1840×832 85.8 KB

I’m now trying to see if I can create a dropdown menu that can limit the search to be within either the Title or the Definition field, and as a 3rd option to keep it General. Right now, my code is set up to include both Title and Definition and populates all items that fit either criterion. I’ve looked at all of the available videos and articles I could find related to this but couldn’t find an answer. Do you have any input? Here’s the code I have:

import wixData from 'wix-data';

$w.onReady(function () {
 // TODO: write your page related code here...
});
let debounceTimer;
export function input1_keyPress(event) {

    $w('#loadingGif1').show();

 if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }

    debounceTimer = setTimeout(() => {
        $w('#dataset1').setFilter(wixData.filter().contains('title', $w('#input1').value)
                .or(wixData.filter().contains('definition', $w('#input1').value)
                    .or(wixData.filter().contains('notes', $w('#input1').value))))
            .then(() => {
                count();
            })
    }, 100);
}

function count() {

 let total = $w('#dataset1').getTotalCount();
 if (total > 1) {

        $w('#textResults').text = `${total} results found`;
        $w('#loadingGif1').hide();
        $w('#textResults').show();
     }

 if (total === 1) {

        $w('#textResults').text = `${total} result found`;
        $w('#loadingGif1').hide();
        $w('#textResults').show();

    }

 if (total === 0) {

        $w('#textResults').text = `No results found`;
        $w('#loadingGif1').hide();
        $w('#textResults').show();

    }
2

For now, I found a workaround by creating separate pages for “Title” search and “Definition” search and then using the dropdown menu to navigate to them. If there’s a more direct and simple way to do this, I’d appreciate the info!