User Input Drop-Down Sort

Hey everybody, I created a database that is sorted with a drop-down. I was wondering if there was a way to have a ‘select all’ in the drop down menu because once someone sorts by a feature, they cannot unsort it.

For example, this database is for actors and once someone sorts by hair color, they have to select a hair color and cannot just go back and unsort by hair color and sort by just eye color instead. I currently have a neutral option where the value is set by a common aspect to all the features, such as a letter they all share, but as I’m adding more options that is getting complicated.

Any ideas would be appreciated! Love this forum!

2 Likes

Hi,

please share some more details, such as screenshots or the site url as i am trying to understand more about the issue you described.
a db collection is not sorted by nature but you have the ability to sort your data when loading it from the db and displaying it to the user using a specific ‘View’ of the data
please also look at the following option

thanks,
Shlomi

Thank you for your response! Here is a screenshot of the website:


This is a database for casting actors.

Here is my problem:

Once a user selects a search function, there is no way to stop sorting by that function. So if a user was looking for a tall actor, and then decided after selecting that the actor didn’t really need to be tall, there is no way to stop sorting by height. They could select a different height, but they can’t un-select height. They would have to refresh the page if they want to stop sorting by height altogether.

In this screenshot I originally put the label of ‘build’ with a value common to all height types so this search would be neutralized. However, this requires all of the values to have a common symbol or letter. This makes it very complicated.

For example, I would put a slash in every height value and have the value for the label ‘build’ be a slash, thus all heights would still be visible. This is a clumsy method and not practical as some of my values do not have a common symbol or letter.

I hope that is more clear?

Hi,

thanks for the info! so you want to ‘filter’ the list of actors not ‘sort’ it right? and want an empty option in the dropdown?
can you also share the url of the site you are building?

thanks,
Shlomi

I guess you want to use value of dropdownA to control options of dropdownB?

Hi Henson,

this is not what i had in mind although this is a nice enhancement going forward, another one would be to use multi-value selects (checkboxes/toggles) as the user might want to choose either tall or very tall build for example.

the only thing i wanted to understand is, if you are referring to sort (order of the results) or filtering (the only results that will show up).

basically from what i understand, you want to revise the dropdowns to also have an empty option, this should happen when the dropdown is not configured as ‘Required’ in its settings, but seems there is a bug there as i couldn’t make it work either (should check with support)

however if you go with checkboxes under different categories for multiple select like you would find in travel search engines, IMHO you’ll get better design and whole other set of challenges :slight_smile:

good luck!
Shlomi

1 Like

Thank you Shlomi! I will look into adding checkboxes, I think that might be a good idea for my site. I am referring to filter, not sort. I’ll check with support for those options I want to keep as dropdown. Thank you for your help.

Heson, while this might be a good feature to include as well (I will look into it) I was asking about filtering. Thank you for your response, though :slight_smile:

2 Likes

Hi again,

and this point is very tricky so it is a 10 points bonus tip :wink:
Henson did have a point and e-commerce and travel sites do work this way, if in the example above the user chooses a specific airport in NYC, some of the airlines might not be available. so based on the actual data you have in the db, some of the available filters for different categories might not be relevant.

this feature is very advanced and is named facet in search engines.
however i strongly recommend you keep it simple for starts, and once the site get amount of traffic that will require those tricks, ping me and we will figure something out :wink:

good luck!
Shlomi

2 Likes

Thanks so much for your help!

Hi Shlomi,
I think I miss the point, let user can select more than one option. You example was really nice :).

One last question Shlomi,

I really like your idea to filter with checkboxes for some of the inputs. My code for filtering works well for the dropdowns. How do I change it to incorporate checkboxes?

It currently looks like this:


I’ve set all the values of the checkboxes to match the label but it won’t load search results? There’s no warning in the developer console so I’m not sure what I’m doing wrong. Thanks again!

Hi,

this one is a bit tricky.
first, what’s wrong with the above query? in terms of syntax nothing, in terms of semantics there is an ‘And’ between the options so you are asking for an actor with both long and short hair at the same time which will yield no value, makes sense?

what you’ll need is a logical ‘Or’ between the values: https://www.wix.com/code/reference/wix-data.WixDataFilter.html#hasSome

another thing to notice is performance.
what is the default filter? from what i guess in your case, if a user just loads the page for the first time you want him to see all actors right? this means no filter at all to your db, which will also load faster.
then, figure out a more clean design, that will let user add more filter categories - like filter by hair, only then display the different options and actually filter if a user chooses anything but - ‘all checkboxes’ otherwise no need to filter the query by hair at all (returns faster).
so create the filter dynamically with conditions, add the filters with hasSome only if the user chooses this category at all, and is looking for a subset of the options. also what if a user chooses no checkbox in a category? probably does not make sense right?
check out ebay, kayak, amazon, youtube etc, see how they handle such filters :slight_smile:

please also share your site, interesting to see your design!
good luck,
Shlomi

Hi Shlomi,

Thank you for your quick result! Here is a link: https://www.emmalparker.com/michigan-talent-database
As of yet all of the entries are test avatars as I work out the bugs with the search feature (still waiting to hear back from support on the dropdown thing) but I would love your thoughts!

Here is the link to the input form as well: https://www.emmalparker.com/database

The default filter shows all of the actors, but it is a slow load so any way to make that quicker would be helpful.

Do you know how I would set the filters dynamically? Anything I can do to make this more streamlined would be awesome.

Thanks again for all your help!

Hi,

looks cool!
i also recommend you remove the filter button and just run the search on each of the filters change.
this is the right direction, please see my last reply with the recommendations how to make the query faster

good luck,
Shlomi

Shlomi,

Changed to filter on change for each individual input and my site runs much better, thank you!

If you don’t mind me picking your brain one last time, I have a last bit of code I can’t figure out:

This works great to sort when my checkbox is checked, but when someone unchecks it doesn’t change the results back. I tried adding an ‘else’ section to the code, but it gave me a weird warning.

I’ll keep researching this on my own but if you have any pointers I would be grateful!

Hi,

glad to see you are making a good progress!
you need to re-run the query on every checkbox change, however please build your filter dynamically.
so when you use dataset.setfilter(myFilter) - first build the filter and check the current checkboxes for each of the categories (hair/height etc) to add more collection columns with their hasSome values.
please do not forget:
if no checkbox was checked for a category, no need to filter that db column right?!
and if no category was checked at all, no need for a filter at all :slight_smile: empty filter might have given you that hard time…

one you are able to pull that code off it will be fast, and easy to add more filter so hang in there!

good luck,
Shlomi

1 Like

Thank you!

So are you saying to build individual boolean-style columns for each filter (short, tall etc?) I’m not sure if that will work with the other aspects of my site (individual dynamic pages, entry form) so I want to be sure I understand.

It seems the more I stamp out fires the more pop up lol. When letting each filter be set ‘onchange’ it only filters by one field at a time, not narrowing down the whole query. So if someone searches girl it will show all the girls, but then if they select blue eyes it will show everyone with blue eyes, not just the girls with blue eyes, which is what I want. I want to be sure people doing the casting can quickly find their perfect talent.

Thanks,
Emma

Hi Emma,

no need to change anything in the db collection.
please take a look here:

	var filter = wixData.filter();
	if($w("#filterinput2").value !== "G"){
		console.log($w("#filterinput2").value);
		filter = filter.contains("gender", $w("#filterinput2").value);
	}
	// .. continue with the rest of the filters the same way
	
	$w("#dynamicDataset").setFilter(filter); 

filtering the query by each of the categories is an additional overhead, so adding filters that the user did not choose will slow down the query

btw, please also have a look in your Talent db collection, a few of the last records have the age as an integer rather than text

does it make sense?
Shlomi

Hi Shlomi,

Couple questions:

  1. Do I just pop the code in or do I put it in as an ‘onchange’ or ‘onclick’ event?
  2. for !== “G” do I need to set “G” to the value assigned to the checkbox? Or a different value?

Thanks again!
Emma

Hi Emma,

  1. The code should go inside the onchange event exactly where you have it now
  2. ‘G’ is the placeholder for the ‘nothing selected’ or ‘filter by hair’ etc.

Shlomi