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();
        });
}
        


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('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();
            });
    });

});


Author

by Code Queen


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

151 views0 comments

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.

  • Code Queen Facebook Group Icon
  • Facebook Logo
  • Twitter Logo
  • YouTube logo
  • Instagram Logo
  • Linkedin Logo

© 2021.  All Rights Reserved by Code Queen, LLC.