Create multiple query for same collection and display results on a repeater

Ask the community
,
1

I have a search bar (text input) on a dynamic page with a repeater directly underneath it, that visually shows items from my dataset when a user types in something in the search bar. It’s for a song library where users can input a query in the search bar and it will show the song item in the repeater. What happens is when a user clicks the item shown in the repeater they are directed to the individual page to learn more about the song. Right now, I have it coded to filter by song title (“title”). So whatever they enter in the search it only filters by the song title.

This is nice, but what I want is for the user to also be able to input the ‘album’ or ‘artist’ information in the same single search box and have it also filter by those. For example, let’s say the song is ‘Black Dog’ by Led Zeppelin, from the album Led Zeppelin IV. As a user, if I type in any of these details (led zeppelin or black dog or led zeppelin IV), the repeater would show the same result to the user. This song library will eventually have hundreds of songs.

Anyone know what I need to do for this?

( Note : “Items” is the dataset collection name, “title” is a song title from the dataset, “subtitle” is the artist, “itemPageText” is the album. I also have two datasets on the page, “dataset2” is connected to the dropdown repeater under the search bar which shows the items in the repeater, and “dataset1” is connected to the main repeater which displays the song, album, and artist info lower down on the same page already.

Here is the current code below:

//Code for seraching by SONG TITLE in search bar
import wixData from ‘wix-data’ ;

let filterByTitle ;
let filterBySubtitle ;
let debounceTimer ;

$w . onReady ( function () {
$w ( “#searchBar” ). onKeyPress ( function () {

    **if**  ( debounceTimer ) { 
        clearTimeout ( debounceTimer ); 
        debounceTimer  =  **undefined** ; 
    } 
    debounceTimer  =  setTimeout (() => { 
        filter($w ( '#searchBar' ). value ); 
        checkKeyword () 
        $w ( "#clearSearch" ). show (); 
    },  100 ); 
}); 

**function**  filter ( tutorials ) { 
    **if**  ( filterByTitle  !==  tutorials ) { 
        **let**  newFilter  =  wixData . filter (); 

        **if**  ( tutorials ) 
            newFilter  =  newFilter . contains ( 'title' , tutorials ); 

        $w ( '#dataset2' ). setFilter ( newFilter ); 

        filterByTitle  =  tutorials ; 
    } 
} 

//FILTER REPEATER WITH REPEATER ITEM 
$w ( '#dataset1' ). onReady (() => { 
    $w ( '#searchRepeater' ). onItemReady (( $item ,  itemData ) => { 

        //CREATE AN EMPTY ARRAY 
        **let**  arrKeyword  = [] 

        $item ( '#button2' ). onClick (() => { 

            $w ( '#searchRepeater' ). hide (); 

            //ADD THE ITEM'S TITLE TO THE ARRAY 
            arrKeyword . push ( itemData.title ) 

            console . log ( arrKeyword ) 

            //FILTER DATASET WITH THE TITLE IN THE ARRAY 
            $w ( '#dataset1' ). setFilter ( wixData . filter (). hasAll ( 'title' ,  arrKeyword )); 
        }); 
    }); 
}); 

//SHOW THE REPEATER ONLY WHEN THE ITEM IS FOUND 
**function**  checkKeyword () { 
    **let**  searchKey  =  $w ( "#searchBar" ). value ; 

    wixData . query ( "Items" ) 
        . contains ( "title" ,  searchKey ) 
        . find () 
        . then ( result  => { 

            result.length  >  0  ?  $w ( "#searchRepeater" ). show () :  $w ( "#searchRepeater" ). hide (); 
        }); 
} 

//CLEAR FILTER 
$w ( "#clearSearch" ). onClick (() => { 

    $w ( "#searchBar" ). value  =  **undefined** ; 
    $w ( "#clearSearch" ). hide (); 
    $w ( "#searchRepeater" ). hide (); 

    $w ( "#dataset1, #dataset2" ). setFilter ( wixData . filter ()); 
});

});