One form drop-down filter list
I created a list of filterable items made with Low-Search and Low-Options in itself it does work, but the filter lists I created seem to work separetly but i'd like to make them work together.
The code I'm using is like this, but I'd really like to put these lists in a dropdown filter using one form with one submit button on the end.
This the code i use for the seperrate list i use now.
<h5> Filter Categorie</h5>
{exp:low_search:filters query="{segment_3}" result_page="main-templates/result-filter"}
{exp:channel:categories channel="item" parent_only="yes" style="linear"}
{if count == 1}<ul>{/if}
<li>
<a href="{low_search:url toggle:category="{category_id}"}">{category_name}</a>
{if category_id IN ({low_search_category})} = Weergegeven{/if}
</li>
{if count == total_results}</ul>{/if}
{/exp:channel:categories}
{/exp:low_search:filters}
<h5>Tijds duur in de filter tag</h5>
<ul>
{exp:low_search:filters query="{segment_3}" result_page="main-templates/result-filter"}
{exp:low_options:duur parse="inward"}
<li>
{options}
<a href="{low_search:url search:duur="={option:value}"}">
{option:label}
</a>
{/options}
</li>
{/exp:low_options:duur}
</ul>
{/exp:low_search:filters}
<h5>Filter Wanneer</h5>
{exp:low_search:filters query="{segment_3}" result_page="main-templates/result-filter"}
<li><a href="{low_search:url low_events:date_from="0 day" date_to="+0 day"}">Vandaag</a></li>
<li><a href="{low_search:url low_events:date="now;+7 days"}">Deze week</a></li>
<li><a href="{low_search:url low_events:date="+8 days;+14 days"}">Volgende week</a></li>
/exp:low_search:filters}
Do you have a code example using the right template tags for this form? Or any advice on where i can find more info on this?
Best Regards Dave
Replies
Low 31 Mar 2014 12:20
Instead of the Filters tags (of which you could have used just one, wrapping all options), create a single Form tag. Then inside that, generate the different drop-downs, making sure their name="" attributes reflect the different parameter names.
Looking at your filters, you're using the Categories filter (example), the Field search filter (example) and the Low Events filter (example).
Dave 31 Mar 2014 14:39
Thanks Low for pointing me in the right direction;
My code now looks like this and is working quit OK.
{exp:low_search:form
query="{segment_2}"
result_page="main-templates/result-filter"
form_id="search"
}
<fieldset
<legend>Categories</legend>
<div>
<label for="type">Type</label>
<select name="category[]" id="type">
<option value="">Rubriek</option>
{exp:channel:categories
category_group="1|2|3|4|5"
style="linear"
parent_only="yes"
}
<option value="{category_id}"{if category_id IN ({low_search_category})} selected{/if}>
{category_name}
</option>
{/exp:channel:categories}
</select>
</div>
<div>
<label for="variant">Variant</label>
<select name="category[]" id="variant">
<option value="">-- Select variant --</option>
{exp:channel:categories
category_group="1|2|3|4|5|"
style="linear"
}
<option value="{category_id}"{if category_id IN ({low_search_category})} selected{/if}>
{category_name}
</option>
{/exp:channel:categories}
</select>
</div>
</fieldset>
<fieldset>
<legend>Duur</legend>
<div>
<label for="option">Option</label>
<select name="search:duur" id="option">
<option value="">Maakt niet uit!</option>
{exp:low_options:duur parse="inward"}
{if option:group != ''}<optgroup label="{option:group}">{/if}
{options}
<option value="{option:value}"{if option:value == low_search_search:service_options} selected{/if}>
{option:label}
</option>
{/options}
{if option:group != ''}</optgroup>{/if}
{/exp:low_options:duur}
</select>
</div>
</fieldset>
<fieldset>
<legend>Wijk</legend>
<div>
<label for="option">Option</label>
<select name="search:wijk" id="option">
<option value="">Maakt niet uit!</option>
{exp:low_options:wijk parse="inward"}
{if option:group != ''}<optgroup label="{option:group}">{/if}
{options}
<option value="{option:value}"{if option:value == low_search_search:service_options} selected{/if}>
{option:label}
</option>
{/options}
{if option:group != ''}</optgroup>{/if}
{/exp:low_options:wijk}
</select>
</div>
</fieldset>
<fieldset>
<label for="keywords">Keywords</label>
<input type="search" name="keywords" id="keywords" />
</fieldset>
<input type="hidden" name="require_all[]" value="category">
<button type="submit">Search</button>
{/exp:low_search:form}
Am i doing this the right way?
How can I (for the Categories filter) in the first drop down, select a parent category and for the second drop down populate this whit its children? Is this even possible?
Low 31 Mar 2014 15:02
You're sort of on the right track, but by the looks of it, you're still a bit overzealous with literally copy/pasting the example code.
Now, you're displaying two identical drop-downs. If you want to, as you suggest, select a parent first and a child later, you'll have to create that functionality yourself, as you will need JavaScript to dynamically change the options in the second select. How you want to do that (using optgroups or Ajax or something else) is up to you.
Also, having the require_all parameter there is open for debate. Do you need it? Do you have auto-assign parents enabled in EE? So, if an entry has a child category assigned, does it also have the parent category assigned? Or only the child? If the latter is true, and you only want to select a single category, then you don't need it.
Next, you have 2 drop downs for Wijk and Duur. But both refer to the variable "low_search_search:service_options" in their IN-conditionals. You should change that to point to the actual name of the drop down (eg, low_search_search:wijk).
So, you're definitely on the right track, you just need to make the code more your own, I think.
Dave 15 Apr 2014 12:12
Hi Low thanks for your help and isight,
I took your advice on my code for the form and spend more time on trying to understanding Low Search..
After consideration I would like to use checkboxes to filter out the entries. I looked at your examples and made a small form which contain a category filter and a channel-field filter both using checkboxes.
The Category works perfect I am able to choose one or more category's and the result shows one or multiple categories.
But on the channel-field filter I can to choose one or more options for that field but only one is shown in the result, I think it has to do with the AND & OR possibility.
Is this even possible to use a channel-field filter with checkbox returning multiple results from the checked boxes?
Here is my new code:
{exp:low_search:form
query="{segment_2}"
result_page="main-templates/result-filter-check"
form_id="search"
}
<fieldset>
<div>
<span class="label">Category</span>
<div>
{exp:channel:categories style="linear" parent_only="yes"}
<label>
<input type="checkbox" name="category:type[]" value="{category_id}"{if category_id IN ({low_search_category:type})} checked{/if}>
{category_name}
</label>
<br/>
{/exp:channel:categories}
</div>
</fieldset>
<fieldset>
<div>
<span class="label">TijdsDuur</span>
<div>
{exp:low_options:duur parse="inward"}
{options}
<label>
<input type="checkbox" name="search:duur" value="{option:value}"> {option:label}
</label> <br/>
{/options}
{/exp:low_options:duur}
</div>
</fieldset>
<button type="submit">Search</button>
{/exp:low_search:form}
Low 15 Apr 2014 12:17
Having multiple input fields with the same name="" attribute without using arrays (the [] notation) will have that effect: only the last one in the form will be submitted.
So, try to use name="search:duur[]" instead.
See also: http://gotolow.com/addons/low-search/...
Dave 15 Apr 2014 12:27
Thanks You!