Search input, more than 1 field

Ask the community
,
1

Hi,
I’m trying to create a set of filters on a page using a repater and I have followed this turtorial LINK which I have successfulling working but is there a way I can amend the code to allow the search input to filter from two different fields in the data collection ( title and location ).

Working code with only one field (title)


import wixData from "wix-data";
//working do not edit

$w.onReady(() => {
  loadHowFarList();
});

let lastFilterTitle;
let lastFilterHow_Far;
let debounceTimer;
export function iadventures_keyPress(event, $w) {
  if (debounceTimer) {
    clearTimeout(debounceTimer);
    debounceTimer = undefined;
  }
  debounceTimer = setTimeout(() => {
    filter($w('#iadventures').value, lastFilterHow_Far);  
  }, 500);
}

export function iFar_change(event, $w) {
	filter(lastFilterTitle, $w('#iFar').value);
}

function filter(title, howFar) {
  if (lastFilterTitle !== title || lastFilterHow_Far !== howFar) {
    let newFilter = wixData.filter();
    if (title)
      newFilter = newFilter.contains('title', title);
    if (howFar)
      newFilter = newFilter.contains('howFar', howFar);
    $w('#dataset6').setFilter(newFilter);	
    $w('#dataset5').setFilter(newFilter);		
    lastFilterTitle = title; 
    lastFilterHow_Far = howFar;
  }
}

function loadHowFarList() {
  wixData.query('HowFarList')
	  .find()
	  .then(res => {
	  	let options = [{"value": '', "label": 'All Walks'}];
	  	options.push(...res.items.map(howFar => {
	  		return {"value": howFar.title, "label": howFar.title};
	  	}));
	  	$w('#iFar').options = options;
	  });

}

I have spend hours amending it in various combinations with no luck

I saw on another thread the code below (I have changed the IDs) but I can’t work out where to place it so it almosted worked… it allowed to search both title and locaton BUT it disabled the dropdown box (howfar)


$w("#dataset6").setFilter(wixData.filter() 
     .contains("title", $w("#iadventures").value) 
     .or(wixData.filter() 
          .contains("location", $w("#iadventures").value)) 
     .or(wixData.filter()

Many thanks,
Dean

2

If you are trying to capture the item either contains title or location value, try:

function filter(title, howFar) {
  if (lastFilterTitle !== title || lastFilterHow_Far !== howFar) {
    let newFilter;
    if (title)
      newFilter = wixData.filter().contains('title', title);
    if (howFar) {
      if（title）{
        newFilter = newFilter.or ( 
          wixData.query('HowFarList'
          .contains("location", $w("#iadventures").value));
       }
       else {
        newFilter = wixData.filter().contains("location", $w("#iadventures").value); 
        }
    }
    $w('#dataset6').setFilter(newFilter);		
    lastFilterTitle = title; 
    lastFilterHow_Far = howFar;
  }
}
3

Thanks for you reply @ayleung66 .
I have tried that with no luck so far but still playing around with it.

I have a typing box (#iadventures) that i was hping if I typethe word ‘‘Wells’’ it will filter items from the datacollection by using both the title and location fields.

As the word ‘‘Wells’’ may be in both columns

1365×625 484 KB

1365×625 116 KB

4

Well, to fix the problem , you have to identify the problem first. I don’t even know if I understand your problem correctly. My understand is, you want to set the filter condition to capture the item contains either the title value or location value, and it is not doing。 Right? If that is the case, for me to help you, you have to describe the problem in details, what is working and not working. You may have to put more console.log message to get close to the problem.

5

Took awhile but had another stab at it and woo…its all sorted now
I just added the line ‘’ .or(wixData.filter().contains( ‘location’ , title)); ‘’ under the title info and works perfectly


 if (title)
      newFilter = newFilter.contains('title', title) 
       .or(wixData.filter().contains('location', title));