Create a search for database with filters

Ask the community
, ,
1

Hello,
I am currently trying to make an advanced database search for my website with filters. Like this: https://www.wix.com/code-examples/search-a-database. I am following these instructions: https://support.wix.com/en/article/corvid-tutorial-adding-collection-data-search-functionality
I currently have this code:

import wixData from "wix-data";

export function input1_click(event) {
 // Runs a query on the "recipes" collection
wixData.query("Restaurant") 
 // Query the collection for any items whose "Name" field contains  
 // the value the user entered in the input element
  .contains("title", $w("#input1").value)
  .find()  // Run the query
  .then(res => {   
 // Set the table data to be the results of the query     
    $w("#table1").rows = res.items; 
   }); 
}

$w.onReady(function () {
 $w("#table1").columns = [{
 "id": "restaurant",
 "dataPath": "title",
 "label": "Restaurant",
 "type": "string",
 }, {
 "id": "packaging",
 "dataPath": "containerDiscount",
 "label": "Packaging",
 "type": "string",
 }, {
 "id": "straws",
 "dataPath": "straws",
 "label": "Straws",
 "type": "string",
  }, {
 "id": "foodrating",
 "dataPath": "foodRating1",
 "label": "Food Rating",
 "type": "string",
  }, {
 "id": "envirorating",
 "dataPath": "envrioRating",
 "label": "Enviro Rating",
 "type": "string",
 }];
});

$w("#table1").expand();
 wixData.query("recipes")
    .contains("name", $w("#input1").value)   
    .find()
    .then(res => {   
      $w("#table1").rows = res.items; 
      $w("#table1").expand();
    });
}

export function dropdown1_change(event) {
 // Runs a query on the "recipes" collection
wixData.query("Restaurant") 
 // Query the collection for any items whose "Name" field contains  
 // the value the user selected in the dropdown
  .contains("containerDiscount", $w("#dropdown1").value)
  .find()  // Run the query
  .then(res => {   
 // Set the table data to be the results of the query
     $w("#table1").rows = res.items; 
   });

function loadOptions() {
 
 // Run a query that returns distinct items in the collection
 wixData.query("Restaurants")

 // Set the course as the field that must be distinct
   .distinct("containerDiscount")
 
   .then(results => {

 // Call another function to reformat the distinct items
 // the way the dropdown element expects
 let distinctList = buildOptions(results.items);
 
 // Use `unshift()` to add another dropdown option at 
 // the beginning of the array, in the correct format
     distinctList.unshift({ "All Packaging": '', "label": 'All Packaging'    });
 
 // Set the options of the dropdown 
   $w("#dropdown1").options = distinctList;
 
  });
 
}

function buildOptions(dropdownItems) {    
 return items.map(currentItem => {
 return { 
 "label": "currentItem", 
 "value": "currentItem" 
     };
  });
}

$w.onReady(() => {
 
  loadOptions();
 
  $w("#table1").columns = [{
        ...
        ...
        ...
 
    }];
 
 
});

Could someone tell me what is wrong with this?

Thanks in advance,
Alex