CMS Development

SLee6
Member

Setting up a content search bar for one blog

SOLVE

I'm working to implement search functionality for a client's website, which has many pages and two blogs. My goal is to create a search input that, when used, returns results from just one of the blogs. Currently, my search input looks like this, adapted from the search_input module:

<div class="hs-search-field"> 
    <div class="hs-search-field__bar"> 
      <form action="/pubresultspage">
        <input type="text" class="hs-search-field__input" name="term" autocomplete="off" aria-label="{{ "Search" }}" placeholder="{{ "Search Publications" }}">

          <input type="hidden" name="type" value="BLOG_POST">
        
      </form>
    </div>
    <ul class="hs-search-field__suggestions"></ul>
</div>

 

With this, I have limited the search results to blog posts, but how can I limit it further to just ONE blog? I am definitely in over my head, so any ideas would be appreciated.

0 Upvotes
1 Accepted solution
SLee6
Solution
Member

Setting up a content search bar for one blog

SOLVE

Thank you for the assist!

 

Yes, I am using a cloned search_input module, including the javascript.

I was able to use &pathPrefix as you suggested to filter the search results to a single blog. I implemented it a little differently:

 

 

<div class="hs-search-field"> 
  <div class="hs-search-field__bar">
    <form action="/{{ site_settings.content_search_results_page_path }}"> 
      <input type="text" class="hs-search-field__input" name="term" autocomplete="off" aria-label="{{ "Search" }}" placeholder="{{ "Placeholder Text" }}">
      <input type="hidden" name="type" value="BLOG_POST">
      <input type="hidden" name="pathPrefix" value="blog-name">
    </form>
  </div>
  <ul class="hs-search-field__suggestions"></ul>
</div>

 

 

 

This the search filter to display as seen below, which solves the problem!

https://www.websitename.com/hs-search-results?term=your+search+term&type=BLOG_POST&pathPrefix=blog-name

View solution in original post

4 Replies 4
jonchim
Guide | Diamond Partner
Guide | Diamond Partner

Setting up a content search bar for one blog

SOLVE

Hey @SLee6,

 

You can try appending a &pathPrefix= to the form action something like this below that will only filter anything in that one blog if its something like domain.com/blog2/blog-post-name. I've done this cloning the hubspot search module but they also included javascript that you need to also include the pathPrefix as well. Not sure if you have JS in your module or if this is in your blog listing code. 

 

<form action="/{{ site_settings.content_search_results_page_path }}?&pathPrefix=blog2" onSubmit="return false"> 

 






Jon Chim
VP of Design & Development
Hypha HubSpot Development


check Did my post help answer your query? Help the Community by marking it as a solution
SLee6
Solution
Member

Setting up a content search bar for one blog

SOLVE

Thank you for the assist!

 

Yes, I am using a cloned search_input module, including the javascript.

I was able to use &pathPrefix as you suggested to filter the search results to a single blog. I implemented it a little differently:

 

 

<div class="hs-search-field"> 
  <div class="hs-search-field__bar">
    <form action="/{{ site_settings.content_search_results_page_path }}"> 
      <input type="text" class="hs-search-field__input" name="term" autocomplete="off" aria-label="{{ "Search" }}" placeholder="{{ "Placeholder Text" }}">
      <input type="hidden" name="type" value="BLOG_POST">
      <input type="hidden" name="pathPrefix" value="blog-name">
    </form>
  </div>
  <ul class="hs-search-field__suggestions"></ul>
</div>

 

 

 

This the search filter to display as seen below, which solves the problem!

https://www.websitename.com/hs-search-results?term=your+search+term&type=BLOG_POST&pathPrefix=blog-name

LParkinson
Member

Setting up a content search bar for one blog

SOLVE

This is a great help for what I'm looking for. But, the suggestions dropdown doesn't seem to work for me, when I start typing in the input field. They should be appended to the '.hs-search-field__suggestions' element (according to the JS).

 

Does this work for you?

0 Upvotes
CHugo
Contributor

Setting up a content search bar for one blog

SOLVE

THANK YOU!! 🙏 😊