Browse by Keyword

4min
The Article will show you how to adapt your Liquid Syntax and Blog Layouts to allow the User to Search for Posts by Keyword
Introduction
You can also allow the User to search for Blog Posts by keyword. This requires a slightly different Liquid parameter from the other navigation methods, but you can use both parameters if you choose.
Liquid Syntax
Although all other Blog Navigation options require you to set the use_adv_search: 'true' Liquid parameter, keyword search requires the use_search: 'true' parameter. 
HTML
{%- include 'module'
    id: '3'
    layout: 'design_system/1'
    per_page: 20
    use_search: 'true' 
-%}
{%- include 'module'
    id: '3'
    layout: 'design_system/1'
    per_page: 20
    use_search: 'true' 
-%}
﻿
If you wish to use both types of Navigation for your Blog, you can set both types of search parameter to 'true'.
HTML
{%- include 'module'
    id: '3'
    layout: 'design_system/1'
    per_page: 20
    use_search: 'true'
    use_adv_search: 'true' 
-%}
{%- include 'module'
    id: '3'
    layout: 'design_system/1'
    per_page: 20
    use_search: 'true'
    use_adv_search: 'true' 
-%}
﻿
HTML and JavaScript Syntax
This code can be included in one of your Blog Navigation Layouts. Keyword Search will be activated if you've set the Liquid parameter above and the JavaScript below sets the keyword parameter in the URL.
HTML
<div class="row no-gutters">
  <div class="col-12">
    <h2>Search Posts by Keyword</h2>
    <form title="Search posts by Date" id="blog-archive-search">
      <div class="form-group">
        <label for="blogSearch">Add Search Keyword</label>
        <input id="blogSearch" type="text">
      </div>
      <input value="Search" class="btn btn-primary" type="submit" data-slug="/module-12" 
      onclick="blogs_search()">
    </form>
  </div>
</div>
{% comment %}This example function will search for posts in the future with this keyword. You'll need to use the "use_search" and "use_adv_search" parameters in your Liquid tag.{% endcomment %}
<script>
  function blogs_search() {
    event.preventDefault();
    var keyword = document.querySelector("#blogSearch").value;
    var url_string = window.location.pathname+"?keyword="+keyword;
    location.assign(url_string);
  }
</script>
<div class="row no-gutters">
  <div class="col-12">
    <h2>Search Posts by Keyword</h2>
    <form title="Search posts by Date" id="blog-archive-search">
      <div class="form-group">
        <label for="blogSearch">Add Search Keyword</label>
        <input id="blogSearch" type="text">
      </div>
      <input value="Search" class="btn btn-primary" type="submit" data-slug="/module-12" 
      onclick="blogs_search()">
    </form>
  </div>
</div>
{% comment %}This example function will search for posts in the future with this keyword. You'll need to use the "use_search" and "use_adv_search" parameters in your Liquid tag.{% endcomment %}
<script>
  function blogs_search() {
    event.preventDefault();
    var keyword = document.querySelector("#blogSearch").value;
    var url_string = window.location.pathname+"?keyword="+keyword;
    location.assign(url_string);
  }
</script>
﻿
﻿
Updated 03 Mar 2023
Did this page help you?
Blog Archive
Browse By Category