Need to add a search box to a dynamic page to search through a dataset. In clear English.

Ask the community
,
1

I think my request is simple, but I just need to add a search box and a drop down box for my dynamic page with all data info within a repeater. I found some tutorials online, but they are not as clear to me as I would need it to be. Can someone please walk me through the steps in adding these boxes via code?

2

to get the ID of any element on the page right click it and choose VIEW PROPERTIES, then you can change the ID to whatever you want. The ID is what we use reference the page elements in the code.

place an input box on you page and set it’s id to “input1”

place a button on your page and set it’s id to “searchButton1”

place a dataset on you page and connect it to your collection, then set the dataset id to “dataset1”

place a repeater on your page and connect it to your dataset

change the “collectionFieldID” in the code below, then run the code on your site…

import wixData from ‘wix-data’;

//wait until the page is loaded
$w.onReady( function () {

//when the search button is pressed on screen
$w(‘#searchButton1’).onClick((event) => {

//wait until the dataset is fully loaded or else we may be searching a partially loaded dataset
$w(“#dataset1”).onReady(() => {

//here we call the function called filter and execute it
filter();

//here we detail what the filter function does
function filter() {

let searchInput = ($w(‘#input1’).value);

//we console log the search variable for debugging purposes
console.log($w(‘#input1’).value);

                            $w("#dataset1").setFilter( 

                                wixData.filter() 
                                .contains("collectionFieldID", ($w('#input1').value)  //change the collectionFieldID to the ID of the column in your collection the you want to filter 
                            ) 
                            ) 
                        } 
                }) 
        })

})

3

Thank you Mike! I am still trying to figure out where to add this information within the properties panel for the event to take place. I am very new to coding, and am very confused. I really don’t understand what to do next.