Create search code by Dataset filtering

About Filtering

Depending what method you used to connect your data, will determine the best way to query or filter that data. For example, if you connected your data directly to a dataset, then you can write some code or use the dataset settings to filter the dataset. Depending on the logic of your page(s) you can perform the search via components on the header, footer, regular page, dynamic page or even a lightbox. While there may be a copious amount of combinations and possibilities, we have gathered a few of the most popular codes for you to practice. We have triggered all of our function using a button, but the code can be modified for onKeyPress or onChange depending on the logic of your arrangement.

When writing the code, it is important to know the different types of filter functions that can be used. For example:

• eq // Equals

• contains // Contains

• endsWith // Ends With

• hasSome // Has some

• le // Less Than or Equal to

• ge // Greater or Equal to

• lt // Less Than

• gt // Greater Than

To view other filter functions see the Corvid Reference: https://www.wix.com/corvid/reference/wix-dataset/dataset/setfilter

---

Good to Know #1

Filtering 1 field by using 1 input element value

Our example assumes all elements are connected to a dataset.

The elements we used in this example:

• 1 Dataset connected to a database collection / #dataset1

• 1 Table element hidden on load / #table1

• 1 Text input element / #input1

• 1 Button element used to trigger search filter / #button1

• 1 field from the database used to search / 'referenceId'

Code using onClick event via Properties Panel

import wixData from 'wix-data';

$w.onReady(function () {
 //TODO: import wixData from 'wix-data';
});

export function button1_onClick() {
   $w("#dataset1").setFilter(wixData.filter()
                .eq('referenceId', $w('#input1').value)
 // if you wanted to search another field you can add a line here
 // For example see below
 // .contains('city', $w('#dropdown2').value)
 // .contains('state', $w('#dropdown3').value)
            )
            .then(() => {
                console.log("Dataset is now filtered");
 //you can show or expand table, repeater or any other element, simply add it to this section
                $w('#table1').show();
            })
            .catch((err) => {
                console.log(err);
            });
}
        

Code using onClick via code without using Properties Panel

import wixData from 'wix-data';

$w.onReady(function () {
 //TODO: import wixData from 'wix-data';
    $w("#button1").onClick((event) => {
        $w("#dataset1").setFilter(wixData.filter()
                .eq('referenceId', $w('#input1').value)
 // if you wanted to search another field you can add a line here
 // For example see below
 // .contains('city', $w('#dropdown2').value)
 // .contains('state', $w('#dropdown3').value)
            )
            .then(() => {
                console.log("Dataset is now filtered");
 //you can show or expand table, repeater or any other element, simply add it to this section
                $w('#table1').show();
            })
            .catch((err) => {
                console.log(err);
            });
    });

});

---

Good to Know #2

Filtering 2 fields by using 1 input element value

Our example assumes all elements are connected to a dataset. We only use 1 input element to search multiple fields in the database collection. The logic of the code is only searching for one or the other, not both.

The elements we used in this example:

• 1 Dataset connected to a database collection / #dataset1

• 1 Table element hidden on load / #table1

• 1 Text input element / #input1

• 1 Button element used to trigger search filter / #button1

• 1 field from the database used to search / 'referenceId'

• 1 field from the database used to search / 'title'

Code using onClick event via Properties Panel

import wixData from 'wix-data';

$w.onReady(function () {
 //TODO: import wixData from 'wix-data';
});

export function button1_onClick() {
    $w("#dataset1").setFilter(wixData.filter()
            .contains('referenceId', $w('#input1').value)
            .or(
                wixData.filter()
                .contains("title", $w('#input1').value)  // You can search the same input element or another one
            )
        )
        .then(() => {
            console.log("Dataset is now filtered");
 //you can show or expand table, repeater or any other element, simply add it to this section
            $w('#table1').show();
        })
        .catch((err) => {
            console.log(err);
        });
}
        

Code using onClick via code without using Properties Panel

import wixData from 'wix-data';

$w.onReady(function () {
 //TODO: import wixData from 'wix-data';
    $w("#button1").onClick((event) => {
        $w("#dataset1").setFilter(wixData.filter()
                .contains('referenceId', $w('#input1').value)
                .or(
                    wixData.filter()
                    .contains("title", $w('#input1').value) //You can search the same input element or another one
                )
            )
            .then(() => {
                console.log("Dataset is now filtered");
 //you can show or expand table, repeater or any other element, simply add it to this section
                $w('#table1').show();
            })
            .catch((err) => {
                console.log(err);
            });
    });

});

---

Author

by Code Queen

Services world wide

Stuck on a project? Hire Code Queen, LLC!

Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.

Online Booking: Discovery Session

Contact Form: Send project details