Create Multiple Query for Same or Different collection and display results on a Table or Repeater

Updated: Sep 14, 2020


About Filtering

While there may be a copious amount of combinations and possibilities to create a query, we have gathered a few of the most popular codes for you to practice. We have triggered all of our functions 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

  • ascending // Sorts by ascending order

  • descending // Sorts by descending order

  • limit // Limits the number of items returned

  • 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-data/wixdataquery

 

Good to Know #1

Query 1 field by using 1 input element value


Our example assumes NO elements are connected to a dataset.


The elements we used in this example:


  • 1 Database collection / 'databaseName'

  • 1 Table element hidden on load / #table1

  • 1 Text input element / #searchField

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

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



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() {
    wixData.query('databaseName')
        .contains('description', $w('#searchField').value)
        .limit(30)
        .find()
        .then(res => {
            $w('#table1').rows = res.items;  //If using a repeater, then replace .rows with .data
            $w('#table1').show();
        });
}
        


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) => {
        wixData.query('databaseName')
            .contains('description', $w('#searchField').value)
            .limit(30)
            .find()
            .then(res => {
                $w('#table1').rows = res.items;  //If using a repeater, then replace .rows with .data
                $w('#table1').show();
            });
    });

});


 

Good to Know #2

Query more than 1 field by using 1 input element value


Our example assumes NO 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 Database collection / 'databaseName'

  • 1 Table element hidden on load / #table1

  • 1 Text input element / #searchField

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

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

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

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



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() {
    wixData.query('databaseName')
        .contains('columnIdName', $w('#searchField').value)
        .or(wixData.query('secondDatabase').contains('author', $w('#searchField').value)) //You can search the same or different database
        .or(wixData.query('databaseName').contains('title', $w('#searchField').value)) //You can search the same or different database
        .limit(30)
        .find()
        .then(res => {
            $w('#table1').rows = res.items; //If using a repeater, then replace .rows with .data
            $w('#table1').show();
        });