I am running Ghost v2.0 in my local machine,
I would like to create a dropdown filter to filter the posts using tags (see below screenshot), I have the certain filters like Getting Started, Videos, News and I have to list the tags in a dropdown input field and on certain selection the page has to refresh and load the posts according to the selection.
Is there any possibility to do this ?
Yes, it’s possible:
First, create the dropdown:
{{#get 'tags' limit="0" as |tags|}}
<select id="tag-selector">
<option>Choose a tag...</option>
{{#foreach tags}}
<option value="{{slug}}" data-href="{{url absolute='true'}}">{{name}}</option>
{{/foreach}}
</select>
{{/get}}
Then, use javascript to redirect the user when they select a tag:
<script>
function selectChanged(event) {
var newLoc = this.selectedOptions[0].dataset.href;
if (loc) {
event.preventDefault();
window.location.href = newLoc;
}
}
Array.from(document.querySelectorAll('select.tag-selector')).forEach(function (element) {
element.onchange = selectChanged
});
</script>
Thanks @vikaspotluri123
The above script does not keeps the selected value in the dropdown. But the tags are working fine. Can you please suggest anything is wrong ?
system
Closed
March 19, 2019, 10:00am
4
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.