Chrome has a feature where you can enter a domain name in the address bar and press the Tab key to enter a search. This makes it easy to search for a site’s content.

This feature is called Tab to Search. Of course, not every site supports it, as the search interface varies from site to site. However, this feature is not an adaptation of Chrome for well-known sites, but is implemented through an open standard OpenSearch description format . As long as your site conforms to this specification, it will support Tab to Search.

It is very simple to implement. First, add a link to an OpenSearch description in the <head> tag on the home page of your site.

1
2
3

<head>
    <link rel="search" type="application/opensearchdescription+xml" title="Luyu's Blog" href="/opensearch.xml">
</head>

Then create an OpenSearch description. In this example we need to create an opensearch.xml in the root of the site .

1
2
3
4
5

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <ShortName>Luyu's Blog</ShortName>
    <Url type="text/html" template="https://luyuhuang.tech/?search={searchTerms}"/>
</OpenSearchDescription>

The <Url> tag specifies the template for the search link, and {searchTerms} indicates the keywords to search for. The OpenSearch description also supports additional configuration fields, the format of which is described in its documentation. But for Tab to Search, this is enough.

My blog is a static site, and the search is purely front-end. So I have to do some processing to read the search field of the URL.

1
2
3
4

if (window.location.pathname === '/' && window.location.search.startsWith('?search=')) {
    var val = decodeURIComponent(window.location.search.replace(/^\?search=/, ''));
    search.onInputNotEmpty(val);
}

Done! The result looks like this: