DEV Community

Cover image for Search Your Site via the Omnibar - Even Static Sites

Search Your Site via the Omnibar - Even Static Sites

Ryan Palo on December 07, 2017

A little while ago, Tiffany White posted an update on Dev.to, documenting a new feature: Chrome Omnibar search. It's one of those features tha...
Collapse
 
jess profile image
Jess Lee

@twhite you are an inspiration!

Collapse
 
rpalo profile image
Ryan Palo

Can confirm. 😬

Collapse
 
tiffany profile image
tiff

Thank you! 🙏🏾

Collapse
 
tiffany profile image
tiff

Awwww thanks Jess!

Collapse
 
maruru profile image
Marco Alka • Edited

Thanks for the great insight! Just one nitpick: What if I want to use search on a static site without VueJS. Why not first introduce the vanilla JS solution for such a basic tutorial and then add options for people, who use Vue, React, jQuery (kill them), etc.?

Collapse
 
rpalo profile image
Ryan Palo

Glad I could help!

So, the important bit for getting your search form to work with omni-search (the URLSearchParams) is just Vanilla JavaScript. The rest of the article is essentially meant to assume you've already got search working on your site already. I just include a link (and sample code from) my personal site because I'd previously written an article on how to add a Vue-based search to your static site. You should be able to use the search params with any setup in much the same manner.

If you'd like some help getting yours hooked up, though, let me know. I'd be happy to try to help :) Maybe I'll do additional tutorials for the other JS frameworks (including JQuery -- there's nothing wrong with a tool that does the job you need it to). I have a big list of posts I've been meaning to write!

Collapse
 
maruru profile image
Marco Alka

Thank you for your answer. Seems I completely over-read that one line of code :)