Guides / Building Search UI / UI & UX patterns

Implement the OpenSearch Protocol with Angular InstantSearch

This page describes how to implement the OpenSearch protocol with Angular InstantSearch.

This is a separate project and unrelated to AWS OpenSearch.

The OpenSearch protocol lets you describe a search engine for your website, so that browsers or other search clients can use that search engine.

How OpenSearch works

In your website or web application, you include a link to an OpenSearch description document. In this document, you describe how browsers can interact with an underlying search engine. This interaction is based on URL templates, for example, https://mysite.com?q={searchTerms}, which tell browsers how to make search requests.

Since the interaction between the browser and search engine is based on a URL, you need to enable URL synchronization.

Create an OpenSearch description document

The OpenSearch description document is an XML file following the OpenSearch specification.

For example:

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>Example Web Search</ShortName>
  <Description>Search example.com content.</Description>
  <Url type="text/html" method="get" template="https://example.com?q={searchTerms}"/>
  <InputEncoding>UTF-8</InputEncoding>
  <Image height="32" width="32"type="image/png">linkToImage</Image>
</OpenSearchDescription>

To adapt this example to your website, update these parts:

  • <ShortName> is the name of your app or website search. It must be 16 or fewer characters.
  • <Description> is a human readable description of your search engine. It must be 1024 or fewer characters.
  • <Url> has the template attribute, that browsers use to create the URL to your search engine.
  • <Image> has a URL (linkToImage) to a PNG image that represents your website, for example, the favicon.

The XML document must be served with Content-Type: application/opensearchdescription+xml media type.

For more information, see OpenSearch description elements.

Include the OpenSearch description document in your website

You can reference the XML document in the <head> of your web pages:

1
2
3
4
5
6
<link
  rel="search"
  href="/opensearch.xml"
  type="application/opensearchdescription+xml"
  title="Search example.com"
/>

For more information, see Autodiscovery in HTML

Did you find this page helpful?