The Article will show you how to adapt your Liquid Syntax and Events Layouts to allow the User to Search for Events by Keyword
Introduction
You can also allow the User to search for Events 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 Events Navigation options require you to set the use_adv_search: 'true' Liquid parameter, keyword search requires the use_search parameter.
This code can be included in one of your Events 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 Events by Keyword</h2><formtitle="Search events by Keyword"id="events-archive-search"><divclass="form-group"><labelfor="eventsSearch">Add Search Keyword</label><inputid="eventsSearch"type="text"></div><inputvalue="Search"class="btn btn-primary"type="submit"data-slug="/module-12"onclick="events_search()"/></form></div></div>
{% comment %}
This example function will search for events 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>functionevents_search(){
event.preventDefault();var keyword = document.querySelector("#eventsSearch").value;var url_string = window.location.pathname+"?keyword="+keyword;
location.assign(url_string);}</script>
Searching and Filtering at the Same Time
The following example also filters for future Events at the same time as it searches for keywords. You need to have set both use_search and use_adv_search parameters in the Liquid (see Syntax section above). You can adjust the JavaScript to remove this, or switch it to fetch Events in the Past.