What's the correct way to filter a list based on input element?

[GalinhaLX]

Hi

What's the correct way to filter a list based on input element?

I've done this codepen here, but it doesn't work

I saw documentation for where and filter functions, but I don't understand if I need a button to apply filters, or if I can filter results directly in collection, based on a simple input element

I see mavo documentation is using a functionnality to filter content here, but I'm lost on the code it uses :(

Don't understand if the displayed list still could be editable, or if filters applies only on displayed lists... yes, really lost, sorry :/

-> my goal is to be able to filter a list
based on its tags,
or filter it trought a plain text search input

[DmitrySharabin]

To get more confident with filtering data in Mavo, you might find this pen helpful:

https://codepen.io/leaverou/pen/vYXPpmg

I'm writing from the phone. Sorry if this example is not exactly what you are looking for. But I hope it'll give you some insights. If not, I'll do my best to help you when I'm at my laptop.

[GalinhaLX]

Hi @DmitrySharabin

thanks for this demo:

unfortunately it uses a lot of javascript (that I don't fully understand)
despite it's an efficient demo,
I'm looking for something more simple:

a filter in one attribute only

[LeaVerou]

Here is a much simpler example: https://codepen.io/leaverou/pen/zYRVEgX?editors=1100

@DmitrySharabin Perhaps we can add this to the documentation somewhere? It's a common question.
Like maybe we could have a "Mavo recipes" page.

[GalinhaLX]

@LeaVerou I bounce on your comment on codepen, about using

<select property="typeFilter">
			<option value="">(Show all)</option>
			<!-- You can even use mv-value="unique(type)" to autogenerate these options -->
			<option>a</option>
			<option>b</option>
			<option>c</option>
		</select>

Where should be used mv-value="unique(type)" ?
as it returns a collection, I tried to add mv-list and mv-list-item with a property on <option> and this unique value as default value
, but it doesn't work

What's the correct way to use it?

[LeaVerou]

You would use it on the element with mv-list since you want that data to be applied to a collection. This case is a bit tricky because you cannot add mv-list on the <select>, since it's already a simple property, and you cannot create a <div> inside it, because the browser only allows specific elements inside a <select>. You can use an <optgroup>, which is also what Mavo does when you use e.g. the legacy mv-multiple syntax on an <option>.

[GalinhaLX]

Hi @LeaVerou

I tried, and retried again :)
I tried to put it on <option> like <option mv-value="unique(type)"></option>
I tried with ul & li lists, simple div..etc

whatever I try, I get a "a,b,c" value -> all values seperated by comma,
instead of one value per line, with repeated lines

Even when trying with <optgroup>, I get this "a,b,c" values in one same line

Could you please tell what you have in mind? or with a simple example that works (would be great)

[DmitrySharabin]

Please, have a look at this pen. Will it help?

https://codepen.io/dmitrysharabin/pen/eYMZmOg

[GalinhaLX]

Thanks a lot to both of you @LeaVerou and @DmitrySharabin