Creating a smart search functionality with HubDB

Highlighted
Regular Contributor

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

Reply
0 Upvotes
2 Replies 2
Highlighted
Community Manager

Hey @Aaaaandrei 

 

I will tag a few of our experts Emoticono feliz     

 

Hey @DanielSanchez @bschneidewind  @DaniellePeters could you please share your knowledge with @Aaaaandrei ?

 

Thank you


Did my post help answer your query? Help the Community by marking it as a solution
Highlighted
Regular Contributor

amazing, thanks @sharonlicari