Want to create user input based website

Ask the community
,
1

Hey Guys!
Thank you so much for taking the time out to read this.
I basically want to create a page where a user can choose a couple of options such as:

  1. Age
  2. Gender
  3. School etc.
  4. Location
    And receive results based on the said inputs.
    Eg. John selects —> Age - 18, Gender - M, School - XYZ, Location - NY. He receives results for scholarships he is eligible for based on said inputs.
    Is this possible? Please let me know how I can go about achieving this.
    Thanks
2

There are many ways you can do it, see following examples for suggestions.

https://www.wix.com/corvid/example/search
https://www.wix.com/corvid/example/checkbox-dropdown
https://www.wix.com/corvid/example/Cascading-Form
https://www.wix.com/corvid/example/Collapsing-Form

https://codequeen.wixsite.com/dropdown
https://www.youtube.com/watch?v=EhXed0u6wh0 video for above tutorial

https://www.youtube.com/watch?v=r0DLqkRDJ34

You can filter the dataset yourself manually.
https://support.wix.com/en/article/about-filtering-and-sorting-database-content-displayed-in-page-elements

Or as shown in above examples, filter it through the use of code using these apis.
https://www.wix.com/corvid/reference/wix-data.html#query
https://www.wix.com/corvid/reference/wix-dataset.Dataset.html#setFilter

3

Wix Repeater With multiple Search Code Example

The Page
Repeater: #repeater1​​
​​User Input: #searchbar
​Dropdown: #dropdownfilter
​Image Element: #searchicon​

The Database
Create a database: Products (dataset1)
​Recommended fields:
Product Name Field: product
Product Description Field: description
Price Field: price
Product Type Field: producttype (for filtering)
​Then link fields to your repeater.

Page Code

import wixData from 'wix-data';
​
// Set Dropdown Options //
​
$w.onReady(() => {
    wixData.query('Type')
        .find()
        .then(res => {
            let options = [{"value": "", "label": "All Types"}];
            options.push(...res.items.map(type => {
                return {"value": type.search,"label": type.search};
            }));
        $w("#dropdownfilter").options = options;
        })
});
let lastFilterSearch;
let lastFilterType;
let debounceTimer;
​
// Search Bar //
export function searchbar_keyPress(event, $w) {
​
    if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
        filter($w("#searchbar").value, lastFilterType);
    },200);
}
​
// Set Filters //
​
function filter(search, type) {
    if (lastFilterSearch !== search || lastFilterType !== type) {
​
        let newFilter = wixData.filter();
​
        if(search)
            newFilter = newFilter.contains('product',search);
​
        if(type)
            newFilter = newFilter.eq('producttype', type);
    $w("#dataset1").setFilter(newFilter);
​
    lastFilterSearch = search;
    lastFilterType = type;
​
    }   
}
​
// Dropdown Filter //
​
export function dropdownfilter_change(event, $w) {
    filter(lastFilterSearch, $w("#dropdownfilter").value);
} 

For More Filters

import wixData from 'wix-data';

let lastFilter1;
let lastFilter2;
let lastFilter3;
​
// Set Filters //

$w.onReady(function () {
​
function filter(filter1, filter2, filter3) {
   if (lastFilter1 !== filter1 || lastFilter2 !== filter2 || lastFilter3 !== filter3) {
​
       let newFilter = wixData.filter();
​
       if(filter1)
           newFilter = newFilter.contains('item1', filter1);
​
       if(filter2)
           newFilter = newFilter.eq('item2', filter2);
       
       if(filter3)
           newFilter = newFilter.ge('item3', filter3);
​
   $w("#dataset1").setFilter(newFilter);
​
   lastFilter1 = filter1;
   lastFilter2 = filter2;
   lastFilter3 = filter3;
​
   }   
}
​
// Dropdown Filters //
// NOTE: The order of the filter functions are important; lastFilter1, lastFilter2, lastFilter3 //
​
export function dropdown1_change(event, $w) {
 filter($w("#dropdown1").value, lastFilter2, lastFilter3);
}

export function dropdown2_change(event, $w) {
 filter(lastFilter1, $w("#dropdown2").value, lastFilter3);
}

export function dropdown3_change(event, $w) {
 filter(lastFilter1, lastFilter2, $w("#dropdown3").value);
}
4

You can use the following code to reset all filters with the onClick of a reset button.

For any pre-filtered inputs, change the “undefined” values to your pre-filtered values.

export function resetbutton_click(event, $w) { 
$w("#dropdownfilter").value = undefined; 
$w("#searchbar").value = undefined; 
$w("#dataset1").setFilter(wixData.filter()); 
}