An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- Slashdot
- Team Treehouse
- Joshua Blankenship
- Pearsonified
- Reencoded
- Line 25
- Wal You
- CSS Tricks
- Spyre Studios
- Freelance Switch
Help Webnuz
Referal links:
July 13, 2021 08:25 am GMT
Original Link: https://dev.to/siddharthshyniben/let-s-add-tab-to-search-to-our-website-oam
Let's add tab to search to our website!
You may have used it on a chromium based browser type out the link of a website, and hit tab to search the site. Works for GitHub, DEV, StackOverflow, Google, Twitter, npmjs.org, etc. In this post, I am going to show you how to implement tab to search for your own site.
1. Method one: Create a form, and *hope* that chromium picks up on it and uses it.
Yes. You can literally create a form (with a few restrictions) and if you are lucky Chromium will recognize it and use it.
The (main) restrictions:
- The form must generate a
GET - The form must result in an
HTTPurl - The form must not have an onsubmit script(!)
- There must be only one input element with type text.
- No passwords, files or text areas.
- All other input elements must be in their default state.
OK, not the best way.
2. Method two: Link to an OSDD
Just create an xml file called osdd.xml (or whatever) and put the following code in it:
<?xml version="1.0"?><OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> <ShortName>Search My Site</ShortName> <Description>Search My Site</Description> <Url type="text/html" method="get" template="http://my_site/{searchTerms}"/></OpenSearchDescription>And then link to it in your html file like so:
<head> <link type="application/opensearchdescription+xml" rel="search" href="url_of_osdd_file"/></head>And you are good to go!
You can test mine here. Or if you don't want to, just see the gif below:
There's more info on this here. Thanks for reading!
Original Link: https://dev.to/siddharthshyniben/let-s-add-tab-to-search-to-our-website-oam
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To