Let users filter data in a table

which page is the code on?

copy of meditations

Sorry, I don’t see any pages with that name, and on all the ones called Meditations, I only see query code, not the filter code I sent you.

Sorry Jeff, let me save it again.

Thank you Jeff !!! it works perfect:)
Another question:) How can i give a default value to user input. ( in case user dont wont to insert nothing. again number issue) For now when user dont insert nothing it don`t show nothing in the list. I solved this in this way:
if ($w(“#input2”).value <= 0) {
$w(‘#input2’).value=0;
}

Hey Jonathan,
I’m not seeing those errors, but having that code in the keypress event is not working. The page doesn’t know when the user has finished entering their choices. The simplest solution would be for you to add a “Search” button to your page and put the code in the onClick event for that button. Like this:

export function button1_click(event, $w) { 
		$w("#dataset1").setFilter(wixData.filter() 
                .contains("title", $w("#input1").value) 
                .contains("type", $w("#selection1").value)
        );    
   }

I tested it and it worked for me.

hi Jeff
I already have a search button above the tableand have set up keypress.
What i ultimately would like to do is have the search box search all data points in my table and then use filters to filter on author and type. Am I able to do both?
For your test, can you do on my page so i can see how you did the code?
thanks so much!!

Hey Jonathan,
Couple of things:

  1. I’m not working in your actual site. I’ve cloned it and am working on it in my account so I can share what I do with you here, but you can’t see the site I’m on.
  2. I did not see a search button on the page and your code was definitely running in a keyPress event for your input box which wasn’t working. So whichever way you want, you need to have that code run inside the onClick event for a button.
  3. I didn’t quite follow what you want to do. You want the user to enter something in the search box which will filter the table based on if what they entered in the Search box is anywhere in the table data? Then let them filter on author and type?

If I’m right - that’s a bit more complicated. I can get you pointed in the right direction, but you’re going to have to dive in and work the code out. Let me know if I’m right and I’ll try and give you some tips. Again, the easiest solution would be to just add all the items to your filter like this:

export function button1_click(event, $w) {
	//Add your code for this event here: 
		$w("#dataset1").setFilter(wixData.filter() 
                .contains("title", $w("#input1").value) 
                .contains("type", $w("#selection1").value)
                .contains("author", $w("#selection2").value)
        );    
   } 

When your user enters data into any or all of the fields or selectors and clicks Search, the table will filter based on their entries.

-Jeff

Hey Ivan,
If your input element is connected to a dataset you can do this in the Input Settings panel.

Select the Input element and click the Set Input Type button. Under Show text on load select Initial text and then give the initial text a value in the space below.


-Jeff

Jeff
This works adding the button. Thank you!
One additional question: when I put in a search selection and the results come up, I would like to have a clear button to go back to the full listing if the search did not yield what I was looking for. i would like a button or link that clears all the search input or selection boxes. What is best way to do this?

Hey Jonathan,
Add code so your Clear button’s onClick event handler looks like this:

export function button2_click(event, $w) {
	$w("#dataset1").setFilter(wixData.filter());
}

Read the API here to see where I got this.

This brings your table back to the full listing, but it doesn’t actually clear the user selections in the dropdowns or input element. To do that just add more code to the same onClick which sets their values to “null”. See the API for dropdown and input.

HI Jeff. Code is not working. I have created the button click yet a search is not yielding any results. Here is the code I am using:

import wixData from ‘wix-data’;

export function button1_click_1(event, $w) {
//Add your code for this event here:
$w(“#dataset1”).setFilter(wixData.filter()
.contains(“title”, $w(“#input1”).value)
.contains(“type”, $w(“#selection1”).value)
.contains(“author”, $w(“#selection2”).value)
.contains(“code”, $w(“#input2”).value)
);
}

THere is no reference in the code to my table. is that correct??
I have another page that has a search that works without a button click button. Here is the code:

import wixData from ‘wix-data’;

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

export function input1_keyPress() {
wixData.query(‘Meditations’)
.contains(‘title’, $w(‘#input1’).value)
.find()
.then(res => {
$w(‘#table1’).rows = res.items;

}); 

}

I would like to do the same thing on my other page but have multiple searches as in the case of the first code above. Is there a way to blend the two together (have multiple searches as in first code but using the search function without button click on the second code?)

The second code on click event is based on key press in the search box.

thank you.

Hey Jonathan,

  1. There is no reference to the table in the code because your table is connected to your dataset. When you set the filter on the dataset you control the contents of the table.
  2. Try this code on your page. It runs the search for any of the 4 things the user can select from only if they aren’t empty. Also, it’s an AND condition, meaning it checks only for entries that match everything the user entered. It will ignore empty fields.
  3. I added code to the clear button that clears out the actual elements so they are empty.
  4. There’s some other stuff here (async await, using the system _ID field to find the author) that I used but can’t really get into why or how here.
import wixData from 'wix-data';
export async function button1_click_1(event, $w) {
	let filter = wixData.filter();
	if ($w("#input1").value) {
		filter = filter.contains("title", $w("#input1").value);
	}
	if ($w("#input2").value) {
		filter = filter.contains("code", $w("#input2").value);
	}
	if ($w("#selection1").value) {
		filter = filter.eq("type", $w("#selection1").value);
	}
	if ($w("#selection2").value) {
		let results = await wixData.query("Author")
			.eq("title", $w("#selection2").value)
			.find();		
			console.log(results);
		filter = filter.eq("author",results.items[0]._id);
	}
	$w("#dataset1").setFilter(filter);
}
export function button2_click(event, $w) {
	$w("#selection1").value = null;
	$w("#selection2").value = null;
	$w("#input1").value = null;
	$w("#input2").value = null;
	$w("#dataset1").setFilter(wixData.filter());
}

There may be a way to get this to work without an actual button click but…as much as I love figuring all this out with you and I’m happy to get you pointed in the right direction, you’ll need to take it from here. If you have trouble getting the code above to work, let me know.

-Jeff

This is all useful, but still doesn’t seem to answer my need: i would like have a Contains filter on a text data field, where I can search for the field containing multiple items. For example, there’s a field called genres (literary genres) that has a comma separated set of values. Note: This cannot be done with a reference table, because wix doesn’t support n-to-n data connections. So ideally the filter would look like (this is pseudo-code)

$w(“#dataset1”).setFilter(wixData.filter() .contains(“genres”, $w(“#filterInput”).value1 or$w(“#filterInput”).value2 or $w(“#filterInput”).value3 ));

I realize this doesn’t work this way, but since the field is text, there ought to be some way to do this. I tried to accomplish by creating multiple filters, but realize now that it’s a dead end, because each filter seems to ge applied to the results of the previous filter (which is as it should be.)

Any solutions or intelligents thoughts on this are gratefully received.

Hey Robin,

We have an OR API and you can add it as a condition in the filter you build for your dataset. That should meet your needs.

-Jeff

Hello all,

I have a similar yet slightly different need.

I have a dynamic page with user input fields attached to dataset1 and also in use as a dataset item1 to be displayed.

On the same page, I also have a table connected to dataset 2. There are input fields on the page that shopuld load into data set 2 and display in the table…

the onready code to filter the table by “_owner” is not working for me. the table displays all collection info. and it is not filtered. My permissions all seem to be in order …

how can i filter this table onready and by “_owner”?

This would solve many days worth of obstacle and help me progress quite a bit so …
Thanks so much in advance for your kind help!

current code below

import wixUsers from 'wix-users';
import wixData from 'wix-data';

export function dataset2_onready() {
	//Add your code for this event here: 
}$w.onReady(function () {  
  $w('#dataset2').setFilter(
    wixData.filter().eq("_owner", wixUsers.currentUser.id)

Thanks, Jeff, for responding - somehow I missed that. Yes, .OR would do the trick.

is someone able to assist with advice on how to go about my inquiry above? Thanks!!

What does it mean by “For this example give the Input element the ID filterInput in the Properties panel.”

I though Inpit element means a text box for someone to input, so how to give it an ID. very confusing