I need help creating a HubSpot widget that pulls information from my HubDB table. I want users to be able to filter through the displayed content using search options, but I’m running into problems with the filtering feature. Can someone help me fix this?
My HubDB table has these columns:
| hs_name | hs_path | name | summary | region | event_date | venue | lang | banner | link |
<div class="wrapper mt-4 search-area">
<div class="row">
<div class="col-md-6 mt-0 search-input" style="text-align: left;">
<input type="text" id="searchBox" placeholder="Type to search..." />
</div>
<div class="col-sm-2 dropdown-area">
<select class="region-filter">
<option value="all">All Regions</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
</select>
</div>
<div class="col-sm-2 dropdown-area">
<select class="lang-filter">
<option value="all">All Languages</option>
<option value="Spanish">Spanish</option>
<option value="German">German</option>
</select>
</div>
<div class="col-sm-2 dropdown-area">
<select class="type-filter">
<option value="all">All Types</option>
<option value="Online">Online</option>
<option value="Onsite">Onsite</option>
</select>
</div>
</div>
</div>
<div class="wrapper ResultsArea mt-4">
{% set now_timestamp = unixtimestamp( local_dt ) %}
{% set db_query = "event_date__lt="~now_timestamp~"&orderBy=-event_date" %}
{% set records = hubdb_table_rows(<tableId>, db_query) %}
{% for item in records %}
<div class="info-card item" data-region="{{ item.region == 'CA' }}" data-lang="{{ item.lang == 'Spanish' }}" data-type="{{ item.region == 'Online' }}">
<div class="row no-gutters">
<div class="col-md-4">
<img src="{{ item.banner.url }}" alt="Event Image" class="img-fluid h-100" />
</div>
<div class="col-md-6">
<div class="info-body">
<p class="info-meta">
<span class="tag tag-pill">{{ item.region }}</span>
<span class="tag tag-pill"><i class="fa fa-calendar"></i> {{ item.event_date|datetimeformat(('%B %e, %Y')) }}</span>
<span class="tag">{{ item.venue }}</span>
<span class="tag tag-pill">{{ item.lang }}</span>
</p>
<h5 class="info-title"><strong>{{ item.name }}</strong></h5>
<p><strong>Summary: </strong>{{ item.summary }}</p>
</div>
</div>
<div class="detail-border"></div>
<div class="col-md-2 link-area">
<a href="{{item.link}}" target="_blank">View Details</a>
</div>
</div>
</div>
{% endfor %}
</div>
<script>
$("select.region-filter, select.lang-filter, select.type-filter").change(filterResults);
$("#searchBox").on("keyup", filterResults);
function filterResults() {
var regionVal = $('select.region-filter').val();
var langVal = $('select.lang-filter').val();
var typeVal = $('select.type-filter').val();
var searchVal = $("#searchBox").val();
$('.ResultsArea')
.find('.item')
.hide()
.filter(function() {
var regionMatch = true;
var langMatch = true;
var typeMatch = true;
var searchMatch = true;
if (regionVal !== "all") {
regionMatch = $(this).attr('data-region') === regionVal;
}
if (langVal !== "all") {
langMatch = $(this).attr('data-lang') === langVal;
}
if (typeVal !== "all") {
typeMatch = $(this).attr('data-type') === typeVal;
}
if (searchVal !== '') {
searchMatch = $(this).text().toLowerCase().indexOf(searchVal) > -1;
}
return regionMatch && langMatch && typeMatch && searchMatch;
}).fadeIn('fast');
}
</script>