Using tags as dropdown filter

[pforpradi]

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 ?

[vikaspotluri123]

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>

[pforpradi]

Thanks @vikaspotluri123

@vikaspotluri123

Array.from(document.querySelectorAll(‘select.tag-selector’)).forEach(function (element) { element.onchange = selectChanged });

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 ?