Browse by Keyword

5min
The Article will show you how to adapt your Liquid Syntax and Blog Layouts to allow the User to Search for Posts by Keyword
IntroductionYou 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 SyntaxAlthough 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 SyntaxThis 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?
Yes
Blog Archive
Browse By Category
Docs powered by archbee
TABLE OF CONTENTS
Introduction
Liquid Syntax
HTML and JavaScript Syntax