# HubDB Filtering

**URL:** <https://community.hubspot.com/t/hubdb-filtering/20221>\
**Category:** CMS Development\
**Tags:** hubdb\
**Created:** [April 20, 2020, 4:11pm UTC](https://community.hubspot.com/t/hubdb-filtering/20221 "2020-04-20T16:11:24Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![cives](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cives/32/57633_2.png) [@cives](https://community.hubspot.com/u/cives)\
**Post date:** [April 20, 2020, 4:11pm UTC](https://community.hubspot.com/t/hubdb-filtering/20221/1 "2020-04-20T16:11:24Z")

</div>

Hi all — I followed along with this [tutorial](https://designers.hubspot.com/docs/tutorials/how-to-build-a-real-estate-listing-with-hubdb) over the weekend, trying to apply some of the filtering aspects to a table I use on my site. I was able to get the search bar to work, though it was very buggy. I removed my code for the meantime. I’m trying to add the ability to search by city or filter by some of the yes or no columns to the right: [https://www.nhada.com/covid19/inspection-survey](https://www.nhada.com/covid19/inspection-survey)

Here is my markup:

```auto
<!-- set the filter by drop down, search bar, and submit button -->
<div>
 <form id="form_id" method="get">
 <div>
 <h4>FILTER BY LISTING TYPE: </h4>
 <select name="type" form="form_id" onChange="this.form.submit()">
 <option value="show-all">Show All</option>
 {% set contact = hubdb_table_column(2618384, "contact_free_service").options %} {% for choice in contact %} {% set type_list = type_list~choice.id|list%} {% if choice.id == request.query_dict.contact%}
 <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
 {% else %}
 <option value="{{ choice.id }}">{{ choice.name }}</option>
 {% endif %} {% endfor %}
 </select>
 </div>
 <div>
 <input name="city" type="text" id="search-by" class="autocomplete" placeholder="Search by City">
 </div>
 <input id="submit-button" type="submit" value="search">
 </form>
 <!-- sets the different query parameters using submitted input for hubdb query -->
 ... {% set queryparam = "" %} {% if request.query_dict.contact in ["1", "2", "3", "4"] and request.query_dict.city == "" %} {% set queryparam = queryparam ~ "&type="~request.query_dict.contact|urlencode %} {% endif %} {% if request.query_dict.contact in ["1", "2", "3", "4"] and request.query_dict.city != "" %} {% set queryparam = queryparam~"&type="~request.query_dict.contact|urlencode~"&city __icontains="~request.query_dict.city|urlencode %} {% endif %} {% if request.query_dict.contact == "show-all" and request.query_dict.city != "" %} {% set queryparam = queryparam~"&city__ icontains="~request.query_dict.city|urlencode %} {% endif %} ...
</div>
<div class="mt-20" style="overflow-x:auto;">
 <h4 class="u-styled-heading">COVID-Safe Inspection/Service Stations</h4>
 <table class="responstable mt-10">
 <thead>
 <tr>
 <th>Business Name</th>
 <th>City</th>
 <th style="width:10em !important;">Phone Number</th>
 <th>Website URL</th>
 <th style="width:8em !important;">Pick Up/Drop Off Service?</th>
 <th style="width:6em !important;">Contact Free Service?</th>
 </tr>
 </thead>
 <tbody>
 {% for row in hubdb_table_rows(2618384, 'orderBy=city') %}
 <tr>
 <td>{{ row.business_name }}</td>
 <td>{{ row.city }}</td>
 <td style="width:120px !important;">{{ row.phone_number }}</td>
 <td><a href="https://www.{{ row.website_url }}">{{ row.website_url }}</a></td>
 {% for name in row.pickup_dropoff %}
 <td>{{ name.name }}</td>
 {% endfor %} {% for name in row.contact_free_service %}
 <td>{{ name.name}}</td>
 {% endfor %}
 </tr>
 {% endfor %}
 </tbody>
 </table>
</div>

```

Can someone indicate where I went wrong? Thanks!

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [April 20, 2020, 8:18pm UTC](https://community.hubspot.com/t/hubdb-filtering/20221/2 "2020-04-20T20:18:46Z")

</div>

Hey @cives ,

From your code it doesn’t look like you’ve actually added the queryparam varaible, that’s housing the search output info, to your HubDB call. In the code you posted it shows -

`{% for row in hubdb_table_rows(2618384, 'orderBy=city') %}`

But should be -

`{% for row in hubdb_table_rows(2618384, queryparam) %}`

And then you can add your orderBy to the default queryparam variable.

`{% set queryparam = "orderBy=city" %}`

Hope that helps!

---

<div class="post-metadata">

**Author:** ![cives](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cives/32/57633_2.png) [@cives](https://community.hubspot.com/u/cives)\
**Post date:** [April 20, 2020, 10:14pm UTC](https://community.hubspot.com/t/hubdb-filtering/20221/3 "2020-04-20T22:14:49Z")

</div>

Hey. Thanks for the reply! I altered those calls as you suggested. I’m still having difficulty with the drop-down selector.

My code now looks like:

```auto
<div class="mt-20">

 <h4 class="u-styled-heading">COVID-Safe Inspection/Service Stations</h4>

 <!-- set the filter by drop down, search bar, and submit button -->

 <div>
 <form id="form_id" method="get">

 <div>
 <h4>FILTER BY LISTING TYPE: </h4>
 <select name="type" form="form_id" onChange="this.form.submit()">
 <option value="show-all">Show All</option>
 {% set contact = hubdb_table_column(2618384, "contact_free_service").options %} {% for choice in contact %} {% set type_list = type_list~choice.id|list%} {% if choice.id == request.query_dict.contact%}
 <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
 {% else %}
 <option value="{{ choice.id }}">{{ choice.name }}</option>
 {% endif %} {% endfor %}
 </select>
 </div>

 <div>
 <input name="city" type="text" id="search-by" class="autocomplete" placeholder="Search by City">
 </div>
 <input id="submit-button" type="submit" value="search">

 </form>

 <!-- sets the different query parameters using submitted input for hubdb query -->
 ... {% set queryparam = "" %} {% if request.query_dict.type in ["1", "2", "3", "4"] and request.query_dict.city == "" %} {% set queryparam = queryparam ~ "&type="~request.query_dict.type|urlencode %} {% endif %} {% if request.query_dict.type in ["1", "2", "3", "4"] and request.query_dict.city != "" %} {% set queryparam = queryparam~"&type="~request.query_dict.type|urlencode~"&city __icontains="~request.query_dict.city|urlencode %} {% endif %} {% if request.query_dict.type == "show-all" and request.query_dict.city != "" %} {% set queryparam = queryparam~"&city__ icontains="~request.query_dict.city|urlencode %} {% endif %} ...

 </div>

 {% set table = hubdb_table_rows(2618384, queryparam) %}

 <table class="responstable mt-10">
 <thead>
 <tr>
 <th>Business Name</th>
 <th>City</th>
 <th style="width:10em !important;">Phone Number</th>
 <th>Website URL</th>
 <th style="width:8em !important;">Pick Up/Drop Off Service?</th>
 <th style="width:6em !important;">Contact Free Service?</th>
 </tr>
 </thead>
 <tbody>
 {% if table == [] %}
 <p class='align-center'>Sorry, no listings found for that Search. Try changing your filter and search again.</p>
 {% else %} {% for row in table %}
 <tr>
 <td>{{ row.business_name }}</td>
 <td>{{ row.city }}</td>
 <td style="width:120px !important;">{{ row.phone_number }}</td>
 <td><a href="https://www.{{ row.website_url }}">{{ row.website_url }}</a></td>
 {% for name in row.pickup_dropoff %}
 <td>{{ name.name }}</td>
 {% endfor %} {% for name in row.contact_free_service %}
 <td>{{ name.name}}</td>
 {% endfor %}
 </tr>
 {% endfor %} {% endif %}
 </tbody>
 </table>
</div>

```

As it stands the search bar for city is working, but the drop-down selector is not functioning.

My guess is I’ve gone somewhere wrong in the initial setup of the “contact” variable

```auto
 <select name="type" form="form_id" onChange="this.form.submit()">
 <option value="show-all">Show All</option>
 {% set contact = hubdb_table_column(2618384, "contact_free_service").options %}
 {% for choice in contact %}
 {% set type_list = type_list~choice.id|list%}
 {% if choice.id == request.query_dict.contact%}
 <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
 {% else %}
 <option value="{{ choice.id }}">{{ choice.name }}</option>
 {% endif %}
 {% endfor %}
 </select>

```

That block is referenced again in the conditional calls below:

```auto
{% set queryparam = "" %}
{% if request.query_dict.type in ["1", "2", "3", "4"] and request.query_dict.city == "" %}
 {% set queryparam = queryparam ~ "&type="~request.query_dict.type|urlencode %}
{% endif %}
{% if request.query_dict.type in ["1", "2", "3", "4"] and request.query_dict.city != "" %}
 {% set queryparam = queryparam~"&type="~request.query_dict.type|urlencode~"&city__icontains="~request.query_dict.city|urlencode %}
{% endif %}
{% if request.query_dict.type == "show-all" and request.query_dict.city != "" %}
 {% set queryparam = queryparam~"&city__icontains="~request.query_dict.city|urlencode %}
{% endif %}

```

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [April 20, 2020, 10:42pm UTC](https://community.hubspot.com/t/hubdb-filtering/20221/4 "2020-04-20T22:42:07Z")

</div>

You’ll want to change &type to the label for the column your wanting to filter by which I think is “contact\_free\_service” (?).

```auto
{% set queryparam = "" %}
{% if request.query_dict.type in ["1", "2", "3", "4"] and request.query_dict.city == "" %}
 {% set queryparam = queryparam ~ "&contact_free_service="~request.query_dict.type|urlencode %}
{% endif %}
{% if request.query_dict.type in ["1", "2", "3", "4"] and request.query_dict.city != "" %}
 {% set queryparam = queryparam~"&contact_free_service="~request.query_dict.type|urlencode~"&city__icontains="~request.query_dict.city|urlencode %}
{% endif %}
{% if request.query_dict.type == "show-all" and request.query_dict.city != "" %}
 {% set queryparam = queryparam~"&city__icontains="~request.query_dict.city|urlencode %}
{% endif %}

```

Also in some places you’re using request.query\_dict.type but in others request.query\_dict.contact. You’ll want to change contact to type if you’re going to be using type as your query param in the url.

---

<div class="post-metadata">

**Author:** ![cives](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cives/32/57633_2.png) [@cives](https://community.hubspot.com/u/cives)\
**Post date:** [April 21, 2020, 11:23am UTC](https://community.hubspot.com/t/hubdb-filtering/20221/5 "2020-04-21T11:23:07Z")

</div>

That worked! Thank you.

If I wanted to simply eliminate the dropdown filter and just use the search bar, what would the conditional logic look like? It’s currently:

```auto
{% set queryparam = "" %}
{% if request.query_dict.type in ["1", "2", "3", "4"] and request.query_dict.city == "" %}
 {% set queryparam = queryparam ~ "&contact_free_service="~request.query_dict.type|urlencode %}
{% endif %}
{% if request.query_dict.type in ["1", "2", "3", "4"] and request.query_dict.city != "" %}
 {% set queryparam = queryparam~"&contact_free_service="~request.query_dict.type|urlencode~"&city__icontains="~request.query_dict.city|urlencode %}
{% endif %}
{% if request.query_dict.type == "show-all" and request.query_dict.city != "" %}
 {% set queryparam = queryparam~"&city__icontains="~request.query_dict.city|urlencode %}
{% endif %}

```

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [April 21, 2020, 1:59pm UTC](https://community.hubspot.com/t/hubdb-filtering/20221/6 "2020-04-21T13:59:19Z")

</div>

If you only want the search -

```auto
{% set queryparam = "" %}
{% if request.query_dict.city != "" %}
 {% set queryparam = queryparam ~ "&city__icontains="~request.query_dict.city|urlencode %}
{% endif %}

```

---

<div class="post-metadata">

**Author:** ![cives](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cives/32/57633_2.png) [@cives](https://community.hubspot.com/u/cives)\
**Post date:** [May 1, 2020, 12:48pm UTC](https://community.hubspot.com/t/hubdb-filtering/20221/7 "2020-05-01T12:48:10Z")

</div>

Thanks for your continued help with this. Is there a way to ignore spaces in a search query? A space adds a “+” to the URL and it seems to throw the results off. Thanks in advance,

---

<div class="post-metadata">

**Author:** ![sandipan\_saha](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sandipan_saha/32/88643_2.png) [@sandipan\_saha](https://community.hubspot.com/u/sandipan_saha)\
**Post date:** [September 1, 2021, 9:00pm UTC](https://community.hubspot.com/t/hubdb-filtering/20221/8 "2021-09-01T21:00:01Z")

</div>

Hi @cives Were you able to figure out the issue about ignoring spaces in a search query ?

---

<div class="post-metadata">

**Author:** ![VOnah](https://avatars.discourse-cdn.com/v4/letter/v/0ea827/32.png) [@VOnah](https://community.hubspot.com/u/VOnah)\
**Post date:** [November 27, 2021, 7:16pm UTC](https://community.hubspot.com/t/hubdb-filtering/20221/9 "2021-11-27T19:16:21Z")

</div>

hello @alyssamwilie i’m having similer issue, see my code so far, the filter and search isn’t working. Could you please help out or anyone please? thanks in advance.

\<div\>  
\<form id=“form\_id” method=“get”\>  
\<div\>  
\<h4\>FILTER BY LISTING TYPE: \</h4\>  
\<select name=“type” form=“form\_id” onChange=“this.form.submit()”\>  
\<option value=“show-all”\>Show All\</option\>  
{% set type = hubdb\_table\_column(\<HubDB\_Table\_Id\>, “country”).options %}  
{% for choice in type %}  
{% set type\_list = type\_list~choice.id|list%}  
{% if choice.id == request.query\_dict.country%}  
\<option selected=“selected” value=“{{ choice.id }}”\>{{ choice.name }}\</option\>  
{% else %}  
\<option value=“{{ choice.id }}”\>{{ choice.name }}\</option\>  
{% endif %}  
{% endfor %}  
\</select\>  
\</div\>  
\<div\>  
\<input name=“event\_title” type=“text” id=“search-by” class=“autocomplete” placeholder=“Search by City”\>  
\</div\>  
\<input id=“submit-button” type=“submit” value=“search”\>  
\</form\>  
{% set queryparam = “” %}  
{% if request.query\_dict.type in [“1”, “2”, “3”, “4”] and request.query\_dict.event\_title == “” %}  
{% set queryparam = queryparam ~ “&country=”~request.query\_dict.type|urlencode %}  
{% endif %}  
{% if request.query\_dict.type in [“1”, “2”, “3”, “4”] and request.query\_dict.event\_title != “” %}  
{% set queryparam = queryparam~“&country=”~request.query\_dict.type|urlencode~“&event\_title\_\_icontains=”~request.query\_dict.event\_title|urlencode %}  
{% endif %}  
{% if request.query\_dict.type == “show-all” and request.query\_dict.event\_title != “” %}  
{% set queryparam = queryparam~“&event\_title\_\_icontains=”~request.query\_dict.event\_title|urlencode %}  
{% endif %}  
\<div\>  
\<div class=“container FilterContainer mt-5”\>  
{% set current\_dt = unixtimestamp( local\_dt ) %}  
{% set query = “date\_\_lt=”~current\_dt~“&orderBy=-date” %}  
{% set table = hubdb\_table\_rows(\<HubDB\_Table\_Id\>, query) %}  
{% for row in table %}  
\<div class=“card column”\>  
\<div class=“row no-gutters”\>  
\<div class=“col-md-4”\>  
\<img src=“{{ row.banner.url }}” alt=“Banner” class=“img-fluid h-100” /\>  
\</div\>  
\<div class=“col-md-6”\>  
\<div class=“card-body”\>  
\<p class=“card-text”\>  
\<span class=“badge badge-pill”\>{{ row[“country”].name }} \</span\>  
\<span class=“badge badge-pill”\> \<i class=“fa fa-calendar”\>\</i\> {{ row.date|datetimeformat((‘%B %e, %Y’)) }}\</span\>  
\<span class=“badge”\>{{ row.location }}\</span\>  
\<span class=“badge badge-pill”\>{{ row.language }}\</span\>  
\</p\>  
\<h5 class=“card-title”\>\<strong\>  
{{ row.event\_title }}\</strong\>\</h5\>  
\<p\>\<strong\>Decription: \</strong\>{{ row.description }}\</p\>  
\</div\>  
\</div\>  
\<div class=“event-detail-border”\>\</div\>  
\<div class=“col-md-2 btn-body”\>  
\<a href=“{{row.url }}” target=“\_blank”\>Read More\</a\>  
\</div\>  
\</div\>  
\</div\>  
{% endfor %}  
\</div\>