Add Multiple Filters to Website that Search a HubDB

Highlighted
Top Contributor

Hi, I am trying to filter a hubdb by two multiselect columns. The first collumn is called content_type which works. https://www.channelmarketplace.com/resources?type=16
The ?type=16 has been added so that only the content type that contains the multiselect option featured Resource will initially show when the page first loads.


I would like to add a further dropdown called category that will work in tandem.
By using the two filters the users can fine tune the results rather than using one dropdown or the other. Having show all in both dropdowns shows everything. By having show all selected in the content type dropdown will show all content for whatever category is selected. By having show all selected in the category dropdown will show all content for whatever content type is selected.

 

The filter code for the current page with the working content type dropdown is:

<!-- FILTER -->
<div class="resource-filter">
<form id="form_id" method="get">
<div>
<h4>Filter by content type:</h4>
<select form="form_id" name="type" onchange="this.form.submit()">
<option value="show-all">Show All</option>
{% set types = hubdb_table_column(2101318, "content_type").options %} {% for choice in types %} {% set type_list = type_list~choice.id|list%} {% if choice.id == request.query_dict.type%}
<option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
{% else %}
<option value="{{ choice.id }}">{{ choice.name }}</option>
{% endif %} {% endfor %}</select></div>
</form>
</div>

<!-- sets the different query parameters using submitted input for hubdb query --> 

{% set queryparam = "&orderBy=resource_title"~"&featured_resource_order&show__eq=1" %}
{% if request.query_dict.type in ["1", "11", "12", "13", "15", "16"] %}
    {% set queryparam = queryparam ~ "&content_type__contains="~request.query_dict.type|urlencode %}
{% endif %}
{% if request.query_dict.type == "show-all" %}
    {% set queryparam = queryparam %}
{% endif %}

Thank you.

0 Upvotes
1 Reply 1
Highlighted
Community Manager

Heya @Woodsy

Are you still working on this?

I would probably approach multiple dropdowns a little differently. 

Although you can do this with some pretty basic JavaScript, a popular library for this is Isotope.js which packs in some fun bells and whistles.

This section of the documentation demonstrates how you can add an url hash and that filtered result will load initially.

 

Wondering if @JanetArmstrong@John or @Stephanie-OG might have an interesting perspective on this 🙂

 

Thanks all!

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
0 Upvotes