HubSpot custom module to display data from hubdb and search filter

[VOnah]

Hello everyone,
I'm trying to create a custom module in HubSpot to display data from hubdb and i also to make a search filter so that users can search for some specific info on the pay but i'm having some issue with the filter. Could anyone assist me? Below is my code so far.

Here is my hubDB Table column (i'm using dynamic pages):
| hs_name | hs_path | title | decription | country | date | location | language | image | url |

<div class="container mt-5 filter">
<div class="row">
<div class="col-md-6 mt-0 filter-search" style="text-align: left;">
<input type="text" id="myInput" placeholder="Search..." />
</div>
<div class="col-sm-2 filter-section">
<select class="country">
<option value="all">All Country</option>
<option value="UK"> UK </option>
<option value="BE"> Belgium </option>
</select>
</div>
<div class="col-sm-2 filter-section">
<select class="language">
<option value="all">Language</option>
<option value="English"> English </option>
<option value="French"> French</option>
</select>
</div>
<div class="col-sm-2 filter-section">
<select class="tags">
<option value="all">Tags</option>
<option value="Virtual">Virtual</option>
<option value="Physical">Physical</option>
</select>
</div>
</div>
</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(<hubdbTableId>, query) %}

{% for row in table %}
<div class="card column" data-country="{{ row.country == "BE" }}" data-language="{{ row.language == "English" }}" data-tag="{{ row.country == "Virtual" }}">
<div class="row no-gutters">
<div class="col-md-4">
<img src="{{ row.image.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 }}</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.title }}</strong></h5>
<p><strong>Decription: </strong>{{ row.decription }}</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>

<script>
$("select.country, select.language, select.tags").change(updateEvents);
$("#myInput").on("keyup", updateEvents);

function updateEvents() {
var country = $('select.country').val();
var language = $('select.language').val();
var tags = $('select.tags').val();
var search = $("#myInput").val();

$('.FilterContainer')
.find('.column')
.hide()
.filter(function() {
var okCountry = true;
var okLanguage = true;
var okTags = true;
var okSearch = true;

if (country !== "all") {
okCountry = $(this).attr('data-country') === country;
}
if (language !== "all") {
okLanguage = $(this).attr('data-language') === language;
}
if (tags !== "all") {
okTags = $(this).attr('data-teacher') === tags;
}
if (search !== '') {
okSearch = $(this).text().toLowerCase().indexOf(search) > -1;
}
//only fade a room if it satisfies all four conditions
return okCountry && okLanguage && okTags && okSearch;
}).fadeIn('fast');
}
</script>

[VOnah]

And did it work for you? Could you please provide me the code from there.

[VOnah]

so far i have this...but still not working. could anyone help out please? 

<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>