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 HTTP url

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!

Tags:

Tutorial Webdev Html

How to build powerful tables in React using the React Table package

Websites To Learn Programming For Free

C# For Beginners - Lesson 6: Strings

NodeJS vs Python

Best Website Speed and Performance Testing Tools Free

App Development Practices To Follow For Your Business In 2021

A first look at Qwik - the HTML first framework

Laravel Fluent Str - 48 Methods [🚀 10 MINUTES!]

Let's add tab to search to our website!

Tags:

Related Posts