Define fields that the search should look into

[ezraassj]

Hello,

I'm currently working on making a blog for a client.

I made the listing page + the blog post page template and I'm now working on a custom search page.

Currently, when someone creates an article he has to fill some fields from a custom module I made with like an introduction text and then paragraphs with different styles

full_text, quote_text, image_left_text_right and some others I created.

For the search page, I added a search field on my article page + my listing that are redirecting the user to another page thanks to the query in the URL.

This is the code from the search field

<form action="/{{language}}/search">
<input class="search-input" type="text" name="query">
<button type="submit" class="icon-search"></button>
</form>

After the submitting the user will arrive on my search page which has the following URL

myblog.com/en/search?query=test

So as you can see the word typed in the search box is in the query

Now my issue is that I want to make a check if a the word in the query can be found in the body content of any blogs posts, in the tags or in the title.

I first though of using the content.post_body variable in order to make a check but since I made a custom module using other fields for the blog post template, the content.post_body is not returning anything.

How should I proceed ?

Best

[piersg · Accepted solution]

Hi @ezraassj (thanks @sharonlicari)

If you're using the Hubspot Search API to get the results, e.g. AJAX GET request to an address like this

"https://api.hubapi.com/contentsearch/v2/search?portalId=[PORTAL ID]&term="+query+"type=BLOG_POST&length=SHORT&domain=[YOUR DOMAIN]"

Then the API automatically adds a span with class "hs-search-highlight" around the term to the results, so for example you can add css if you want to highlight that word, or if you're looking for the existence of the query term in the results, you can write a bit of JS to look for that class.

Edit: I apologise, I think I might have misunderstood your question. Are you asking if anyone knows a way to search through blog posts for a word/phrase that is defined in a search? You should use the Hubspot Search API  which will do that for you.

This is my code for that (although should be updated for v3):

// function to get url parameters
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0;i < vars.length ; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1] === undefined ? true : decodeURIComponent(pair[1]);
    }
  }
  return(false);
}

// get search parameter and set as variable
var searchTerm = getQueryVariable('query');
if (searchTerm === false) {
  searchTerm = 'Oh no!'
} else {
  searchTerm = `"`+decodeURIComponent(searchTerm)+`"`;
}

// adds the search term to the h1 of the page so it says "Search results for [search term]"
document.getElementById('search-header').textContent = searchTerm;

var request = new XMLHttpRequest();
request.open('GET', "https://api.hubapi.com/contentsearch/v2/search?portalId=[PORTAL ID}&term="+searchTerm+"type=BLOG_POST&length=SHORT&domain=[DOMAIN]", true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Success!
    var data = JSON.parse(this.response);
    var results = data.results;
    var amount = results.length;
    var listSelector = document.getElementById('search-results');
    if (searchTerm === 'Oh no!' || results === undefined || results.length == 0) {
      document.getElementById('results-amount').textContent = '0';
      listSelector.innerHTML += "<p style='margin: 0 auto;'>Sorry, there are no results for that search. Please search something else.</p>"
    } else {
      document.getElementById('results-amount').textContent = amount;
      [].forEach.call(results, function(obj) {
        listSelector.innerHTML += "<a class='content-item' href="+ obj.url + "><div class='img-wrapper mb-20'><img src="+ obj.featuredImageUrl + "></div><h5>"+ obj.title + "</h5><p>"+ obj.description + "</p></a>"
      });
    }
  } else {
    // We reached our target server, but it returned an error
    console.log(this.response);
  }
};

request.onerror = function(status, error) {
    console.log(error);
};

[sharonlicari]

Hey @ezraassj 

Thank you for sharing this information, I'll tag a few experts could share their knowledge with you.

Hey @piersg @Chris-M @Anton  any advice you can give to @ezraassj?  

Thank you & Happy Friday

Sharon