daflh / vredeburg

A simple starter project to create a blog using Eleventy and Tailwind CSS
https://vredeburg.netlify.app
MIT License
185 stars 67 forks source link

Search in header didn't work #38

Open BrahianVT opened 1 year ago

BrahianVT commented 1 year ago

I tried version in master with last commit and didn't work the q variable is always empty, comparing as in the demo where is working. the URL is : http://localhost:8080/search/?q=&start=1&size=12 I tried to solve but I couldn't what could be the issue? Regards

BrahianVT commented 1 year ago

i tried everything but I press the "header search.box" always reset all the elements in the page also the q parameter so to solve I use localStorage; in main.js added listener in "header-searchbox"

menuToggle.addEventListener('click', () => {
  menu.classList.toggle('hidden');
  searchBox.classList.toggle('hidden');
}, false);
const headerInput = document.getElementById("header-searchbox");
headerInput.addEventListener('keypress', function (e) {
    if(e.key === 'Enter') {
      localStorage['headerInput'] = headerInput.value;
    }
});

and in search.js read it :

query = typeof query === 'string' ? query.toLowerCase() : '';      
if(query === ''){
        query = localStorage['headerInput'] || '';
        localStorage['headerInput'] = "";
    }
jevgenijs-jefimovs commented 6 months ago

@BrahianVT,

Try to replace action attribute value for the header search form from:

<form id="search" action="{{ '/search' | url }}"

to:

<form id="search" action="{{ '/search/' | url }}"

Note the additional forward-slash at the end.