A Simple Tactic For Progressively-Enhanced Search
I was reading this post by Chris Coyier detailing the recent redesign of CSS-Tricks and caught something I can’t believe I’d never thought of before.
Chris described creating a sophisticated client-side search experience whose base HTML markup was a link to a Google site search:
<a href="https://www.google.com/search?q=site:css-tricks.com%20layout" class="jetpack-search-filter__link" > <span class="screen-reader-text">Search</span> <svg> ... </svg> </a>
Instead of merely a link, you could also capture the search query on your page and pass it to a search engine via a regular HTML form:
<form method="get" action="https://www.google.com/search"> <input type="text" id="search" name="q" /> <button type="submit">Search</button> </form>
Then use JS, where present, to prevent the default behavior of the form from submitting to Google—or the search engine of your choice for the privacy minded—and instead execute whatever client-side search functionality you dream up on your site.
Of course, in order for this to work, you better make sure the content of your site is meaningfully indexed by search engines.