Creating a smart search functionality with HubDB

Aaaaandrei · ‎Nov 28, 2019

Hi,

I'm currently working on creating a smart search feature for our HubSpot landing pages using HubDB.

This page will act as a webinar directory, where the webinars and their details are stored in a HubDB table.

I've managed to create a basic search function based on the name of the webinar, but it's quite limited in that it doesn't take into account close variants of query.

For example, if you type in "masters" the search won't show any results all the names contain "master's".

It would be great for the search to be able to tell this is close enough and return the results for master's even if masters is typed in.

Here's the code that makes the search function

HUBL

{% set queryparam = "" %}

{% if request.query_dict.regional_filters && request.query_dict.regional_filters|length > 0 and request.query_dict.name =="" %}
 {% set regFilters = request.query_dict.regional_filters|join(',') %}
    {% set queryparam = queryparam ~ "&regional_filters__in="~regFilters|urlencode %}
{% endif %}

{% if request.query_dict.regional_filters && request.query_dict.regional_filters|length > 0 and request.query_dict.name != "" %}
 {% set regFilters = request.query_dict.regional_filters|join(',') %}
    {% set queryparam = queryparam ~ "&regional_filters__in="~regFilters|urlencode~"&name__icontains="request.query_dict.name|urlencode %}
{% endif %}

{% if request.query_dict.regional_filters|length == 0 and request.query_dict.name != "" %}
    {% set queryparam = queryparam ~ "&name__icontains="~request.query_dict.name|urlencode %}
{% endif %}

{% set nofilter = hubdb_table_rows(1036506, queryparam) %}

HTML

<input name="name" type="text" id="search-by" class="autocomplete search-field pad-20px form-control-lg" placeholder="Search by name...">

jQuery

/* Search works by pressing Enter Key */
$(document).on('keypress',function(e) {
    if(e.which == 13) {
        e.preventDefault();
    var searchQuery = new Array();
    $("input[id=search-by]").each(function(){
    searchQuery.push(this.value);
    });
    var url = window.location.pathname + "?name=" + encodeURI(searchQuery.join(","));
      if(searchQuery == "") {
      alert("Oops, seems like you didn't type anything in the search box, go ahead and try it!")
      } else {
    window.location.href = url;
      }
    }
});

I'd be really grateful for a way on how to achieve this in the current setup.

Cheers,

Andrei