Filter multiple options

goblingraphics · November 23, 2020, 9:11pm

Hello,

I am creating a real estate website. So far, I am creating a filter based in multiple dropdowns and 2 input texts. My filter only works if I add the prices. Is there a way to search without having to input the prices. For example I just want to search houses from all prices.

Here is my code so far:

import {wixData} from ‘wix-data’ ;

export function button2_click(event, $w) {

$w( "#dataset1" ).setFilter(wixData.filter() 

       .contains( "FiltroTipoPropiedad" , $w( '#PropertyDropDown' ).value) 
       .contains( "FiltroTipoEstado" ,$w( '#SalesDropDown' ).value) 
       .ge( "bedrooms" ,Number($w( '#dropdown1' ).value)) 
       .ge( "bathrooms" ,Number($w( '#dropdown2' ).value)) 
       .between( "price" ,parseFloat($w( '#input4' ).value), parseFloat($w( '#input5' ).value))) 


.then((results) => { 
           console.log( "Dataset set is now filtered" ); 
           $w( "#repeater1" ).data = results.items; 

    }). **catch** ((err) => { 
        console.log( **typeof**  items); 
        }); 

$w( "#repeater1" ).expand();

}

CODE-NINJA · November 23, 2020, 9:45pm

You will need something like this…
This are just parts of a searchengine for this example-site here…

https://russian-dima.wixsite.com/wixworld/nedvizhimost-iiii

import wixData from 'wix-data';

var DATABASE    = "database1" //  ---> 
var DATASET     = "#dataset1" //  ---> Товары                                     // <<<---- put in here your data
var REFERENCE1  = "item1" //  ---> Этажность                                  // <<<---- put in here your data
var REFERENCE2  = "dopParametr" //  ---> Дополнительные помещения                   // <<<---- put in here your data
var REFERENCE3  = "item3" //  ---> Спальни                                    // <<<---- put in here your data
var REFERENCE4  = "krovlya" //  ---> Тип кровли                                 // <<<---- put in here your data
var REFERENCE5  = "" //  ---> ??????????                                 // <<<---- put in here your data
var REFERENCE6  = "ploshad" //  ---> квадратура (от / до)

var VARIABLE1                       //  (от / до) Спальни                   
var VARIABLE2                       //  (от / до) Спальни
//---------------------------------- USER-INTERFACE / настройки ----------------------------------------------------- User-Interface-------------------------------


export function DD1_change(event) {SEARCH_ENGINE()}
export function DD2_change(event) {SEARCH_ENGINE()}
export function DD3_change(event) {SEARCH_ENGINE()}
export function DD4_change(event) {SEARCH_ENGINE()}
export function DD5_change(event) {SEARCH_ENGINE()}



async function SEARCH_ENGINE() { 
 let filter =  wixData.filter()  
 let item1, item2, item3, item4

 //DD1-DD5 = DropDowns
 if ($w('#DD1').value!=0) {item1 = $w('#DD1').value}
 if ($w('#DD2').value!=0)  {item2 = $w('#DD2').value}
 if ($w('#DD3').value!=0)  {item3 = $w('#DD3').value}
 if ($w('#DD4').value!=0)  {item4 = $w('#DD4').value}
 //----------------------------------------------------------------------------------------------------------------------------
 // if(typeof item1=="string"){item1 = Number($w('#DD1').value)}
 // if(typeof item3=="string"){item3 = Number($w('#DD3').value)}
 
  console.log(item1)
  console.log(typeof item1)
 
 if (item1!=0)     {filter = filter.eq(REFERENCE1, item1)}
 if (item2!=0)     {filter = filter.eq(REFERENCE2, item2)}
 if (item3!=0)     {filter = filter.eq(REFERENCE3, item3)}
 if (item4!=0)     {filter = filter.eq(REFERENCE4, item4)}

  console.log(filter)
 await  $w(DATASET).setFilter(filter)
//  runCounter()
}

goblingraphics · November 23, 2020, 10:15pm

I am very lost with this example. How do I apply this to my site? My 4 dropdowns are called:
“PropertyDropDown” “salesdropdown” “dropdown1” “dropdown2”

and my 2 entry text are called:
“input4” “input5”

Where do I have to put these inputs?

goblingraphics · November 23, 2020, 10:16pm

I forgot to add these code is being applied to a repeater

CODE-NINJA · November 23, 2020, 11:17pm

@goblingraphics

Here a more simple and Plug&Play-Ready version just for you…

https://russian-dima.wixsite.com/meinewebsite/real-estate

import wixData from 'wix-data';

//---------------------------------- USER-INTERFACE --------------------
//var DATABASE        = "RealEstate"  //--> NOT USED HERE
var DATASET         = "#dataset8" 
var REFERENCE1      = "rooms" 
var REFERENCE2      = "size" 
var REFERENCE3      = "price" 
//------------------------------- User-Interface-------------------------------

var itemCount
var totalItemCount

$w.onReady( () => {
  $w(DATASET).onReady( () => {
    console.log($w(DATASET).getCurrentPageIndex())
//  $w('#TXTseitenanzeige').text=($w("#dataset8").getCurrentPageIndex()).toString()
  } );
} );

export function DD1_change(event) {SEARCH_ENGINE()}
export function DD2_change(event) {SEARCH_ENGINE()}
export function DD3_change(event) {SEARCH_ENGINE()}

export function BTNsearch_click(event) {SEARCH_ENGINE()}


async function SEARCH_ENGINE() { 
 let filter =  wixData.filter()  
 let item1, item2, item3

 if ($w('#DD1').value!=0)  {item1 = $w('#DD1').value}
 if ($w('#DD2').value!=0)  {item2 = $w('#DD2').value}
 if ($w('#DD3').value!=0)  {item3 = $w('#DD3').value}

 if (item1!=0)      {filter = filter.eq(REFERENCE1, item1)} 
 if (item2!=0)      {filter = filter.eq(REFERENCE2, item2)}
 if (item3!=0)      {filter = filter.eq(REFERENCE3, item3)} 

 await  $w(DATASET).setFilter(filter)
}

goblingraphics · November 23, 2020, 11:25pm

@russian-dima and how can I make it with a price range? Because I have a price from and a price to

CODE-NINJA · November 23, 2020, 11:55pm

@goblingraphics
Something in this direction —>

if (input1!="" && input2!="") {filter = filter.between(REFERENCE6, input1, input2)}

goblingraphics · November 24, 2020, 12:15am

@russian-dima

This is what I have so far.

Bedrooms and Bathroom is working. Bit the price is not working. Here is the website:

And my code:
import wixData from ‘wix-data’ ;

//---------------------------------- USER-INTERFACE --------------------
//var DATABASE = “RealEstate” //–> NOT USED HERE
var DATASET = “#dataset1”
var REFERENCE1 = “bedrooms”
var REFERENCE2 = “price”
var REFERENCE3 = “bathrooms”
//------------------------------- User-Interface-------------------------------

var itemCount
var totalItemCount

$w.onReady( () => {
$w(DATASET).onReady( () => {
console.log($w(DATASET).getCurrentPageIndex())
// $w(‘#TXTseitenanzeige’).text=($w(“#dataset8”).getCurrentPageIndex()).toString()
} );
} );

export function dropdown1_change(event) {SEARCH_ENGINE()}
export function dropdown2_change(event) {SEARCH_ENGINE()}
export function dropdown3_change(event) {SEARCH_ENGINE()}
export function button2_click(event) {SEARCH_ENGINE()}
export function dropdown5_change(event) {SEARCH_ENGINE()}

async function SEARCH_ENGINE() {
let filter = wixData.filter()
let item1, item2, item3, item4

if ($w( ‘#dropdown1’ ).value!== 0 ) {item1 = $w( ‘#dropdown1’ ).value}
if ($w( ‘#dropdown2’ ).value!== 0 ) {item2 = $w( ‘#dropdown2’ ).value}
if ($w( ‘#dropdown3’ ).value!== 0 ) {item3 = $w( ‘#dropdown3’ ).value}
if ($w( ‘#dropdown5’ ).value!== 0 ) {item4 = $w( ‘#dropdown5’ ).value}

if (item1!== 0 ) {filter = filter.ge(REFERENCE1, item1)}
if (item2!== 0 ) {filter = filter.ge(REFERENCE3, item2)}
if (item3!== “” && item4!== “” ) {filter = filter.between(REFERENCE2, item3, item4)}

await $w(DATASET).setFilter(filter)
}

CODE-NINJA · November 24, 2020, 12:37am

@goblingraphics

This happens, when i copy&paste your given CODE (which was not used with the CODE-TAGS). As you can see, this code is now just some piece of sh… xDDDD.
Totaly destroyed.

import wixData from'wix-data';//---------------------------------- USER-INTERFACE --------------------//var DATABASE        = "RealEstate"  //--> NOT USED HEREvar DATASET         = "#dataset1"var REFERENCE1      = "bedrooms"var REFERENCE2      = "price"var REFERENCE3      = "bathrooms"//------------------------------- User-Interface-------------------------------var itemCountvar totalItemCount$w.onReady( () => {  $w(DATASET).onReady( () => {    console.log($w(DATASET).getCurrentPageIndex())//  $w('#TXTseitenanzeige').text=($w("#dataset8").getCurrentPageIndex()).toString()  } );} );exportfunction dropdown1_change(event) {SEARCH_ENGINE()}exportfunction dropdown2_change(event) {SEARCH_ENGINE()}exportfunction dropdown3_change(event) {SEARCH_ENGINE()}exportfunction button2_click(event) {SEARCH_ENGINE()}exportfunction dropdown5_change(event) {SEARCH_ENGINE()}asyncfunction SEARCH_ENGINE() { let filter =  wixData.filter()  let item1, item2, item3, item4if ($w('#dropdown1').value!==0)  {item1 = $w('#dropdown1').value}if ($w('#dropdown2').value!==0)  {item2 = $w('#dropdown2').value}if ($w('#dropdown3').value!==0)  {item3 = $w('#dropdown3').value}if ($w('#dropdown5').value!==0)  {item4 = $w('#dropdown5').value}if (item1!==0)      {filter = filter.ge(REFERENCE1, item1)} if (item2!==0)      {filter = filter.ge(REFERENCE3, item2)}if (item3!=="" && item4!=="") {filter = filter.between(REFERENCE2, item3, item4)}await  $w(DATASET).setFilter(filter)}

Please use CODE-TAGS for CODEs!

Like this… (now you can read the code again!)

import wixData from 'wix-data';
//---------------------------------- USER-INTERFACE --------------------
var DATASET         = "#dataset1" 
var REFERENCE1      = "bedrooms" 
var REFERENCE2      = "price" 
var REFERENCE3      = "bathrooms" 
//------------------------------- User-Interface-------------------------------
$w.onReady( () => {
  $w(DATASET).onReady( () => {
    console.log($w(DATASET).getCurrentPageIndex())
  });
});

export function dropdown1_change(event) {SEARCH_ENGINE()}
export function dropdown2_change(event) {SEARCH_ENGINE()}
export function dropdown3_change(event) {SEARCH_ENGINE()}
export function button2_click(event) {SEARCH_ENGINE()}
export function dropdown5_change(event) {SEARCH_ENGINE()}

async function SEARCH_ENGINE() { 
 let filter =  wixData.filter()  
 let item1, item2, item3, item4

 if ($w('#dropdown1').value!==0)  {item1 = $w('#dropdown1').value}
 if ($w('#dropdown2').value!==0)  {item2 = $w('#dropdown2').value}
 if ($w('#dropdown3').value!==0)  {item3 = $w('#dropdown3').value}
 if ($w('#dropdown5').value!==0)  {item4 = $w('#dropdown5').value}

 if (item1!==0)      {filter = filter.ge(REFERENCE1, item1)} 
 if (item2!==0)      {filter = filter.ge(REFERENCE3, item2)}
 if (item3!=="" && item4!=="") {filter = filter.between(REFERENCE2, item3, item4)}

 await  $w(DATASET).setFilter(filter)
}

Ok, you have ‘#dropdown3’ and ‘#dropdown5’ rwhere you want to filter BETWEEN two values right? As you said it will be the PRICE (ok).

How are setted-up your input-fields in DB and how are setted-up the related two dropdowns for the price? → STRING or NUMBER? (be careful).

item3 = $w(‘#dropdown3’).value (OK) → NUMBER or STRING ???
item4 = $w(‘#dropdown5’).value (OK) → NUMBER or STRING ???
REFERENCE2 = “price” (OK) → NUMBER or STRING in DATABASE ?

Do a little TEST…

if (item3!=="" && item4!=="") {filter = filter.between(REFERENCE2, item3, item4)}

replace with…(manual testing)

if (item3!=="" && item4!=="") {filter = filter.between(REFERENCE2, 50.000, 100.000)}

goblingraphics · November 24, 2020, 12:50am

@russian-dima So, I did the test and I got all 6 properties, regardelss of price.

On dropdown 3 and 5 I put numbers:

And dataset price is a number as well:

CODE-NINJA · November 24, 2020, 12:56am

@goblingraphics
To be continued tomorrow, if you did not found a solution by your own till tomorrow. Good night !

goblingraphics · November 24, 2020, 12:59am

@russian-dima I will keep trying But pelase take a loo at it tomorrow to check if i got it or not yet.

CODE-NINJA · November 24, 2020, 6:41am

@goblingraphics
I think you got it already

https://www.wix.com/corvid/forum/community-discussion/filter-with-multiple-options-2

Next time try to handle one and the same problem in one and the same post, thanks.

Topic		Replies	Views
How do I successfully create multiple real estate search filter (drop down menu filters, search button etc) Ask the community code , question	7	788	December 12, 2019
How to create a filter for Real Estate website? Ask the community code , question	3	1542	January 16, 2018
Filter with Multiple Options Ask the community code , question	2	104	November 24, 2020
Problem in filtering with multi search Ask the community code , question	6	179	May 20, 2022
Multiple Filter if a user chooses only one input Ask the community code , question	3	208	September 8, 2021

Filter multiple options

Related topics