Search by tags

[jtpfarm1]

I have this searchbar. It functions as it should, but its searching in all collections and I need it to just search within the active collection. No matter what I do it always searches all collections for tags. Can anyone suggest a change?

<form action="/search" method="get" class="search-form">
<div class="search-bar">
<input type="search" id="search-input" placeholder="Enter Model Number" name="search_query" value="{% if query and query contains 'tag:' %}{{ query | remove: 'tag:' }}{% else %}{{ query }}{% endif %}">
<input type="hidden" id="collection-id" value="{{ collection_id }}" name="collection_id">
<input type="hidden" id="tag-query" name="q" value="">
<button type="submit">Search</button>
</div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
const searchForm = document.querySelector('.search-form');
const searchInput = document.getElementById('search-input');
const tagQueryInput = document.getElementById('tag-query');

searchForm.addEventListener('submit', function() {
tagQueryInput.value = 'tag:' + searchInput.value;
});

// Ensure the search input shows the query without 'tag:' if it exists
if (searchInput.value.startsWith('tag:')) {
searchInput.value = searchInput.value.replace('tag:', '');
}
});
</script>

www.pfabusa.com