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.
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
|
<divclass="row no-gutters"><divclass="col-12"><h2>Search Posts by Keyword</h2><formtitle="Search posts by Date"id="blog-archive-search"><divclass="form-group"><labelfor="blogSearch">Add Search Keyword</label><inputid="blogSearch"type="text"></div><inputvalue="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>functionblogs_search(){
event.preventDefault();var keyword = document.querySelector("#blogSearch").value;var url_string = window.location.pathname+"?keyword="+keyword;
location.assign(url_string);}</script>