CODEWITHSUNDEEP
javascriptangulartypescriptgoogle-chrome
adithya anil
adithya anil

Reputation: 27

How to implement direct search from url bar in angular?

So I noticed that when on GitHub you can directly search after you press the spacebar after "github.com" the URL bar goes to "search mode" like this (on chrome) enter image description here

How can I add the same functionality to my angular project (angular v9)

Upvotes: 0

Views: 418

Answers (1)

ulmas
ulmas

Reputation: 2253

This is called "Tab to Search" and is a feature of Chrome/Chromium and other browsers and it is the implementation of the OpenSearch specification.

Enabling this requires a couple of steps:

  1. Add <link rel="search" type="application/opensearchdescription+xml" href="url_of_osdd_file" title="Website Name"> to the page header.

  2. Add the following "OSDD" file, linked from the link in step 1 (this is the bare minimum set of options):

<?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>

Check this for more details.

Keep in mind that, this feature can be added to any website, but it does require that the website itself supports/provides the search capability (chrome or Google by itself won't be doing the search on behalf of the website using this method).

Upvotes: 1

Related Questions