top of page
Writer's pictureCode Queen

Create search code by Dataset filtering

Updated: Sep 14, 2020


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


Corvid , Wix Design, Project Planning, Private Tutoring
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

447 views0 comments

Recent Posts

See All

Comentários


disclaimer

a quick note about our website content

Our free and premium content is non-exclusive, meaning you are not the only one with access to the content. You can customize our content to fit your end product. Redistribution of our content is strictly prohibited. This means you cannot make our content available to others as-is, stand-alone products or stock products in ANY LANGUAGE, regardless if you offer our content for free or not.

bottom of page