🎉 Try the public beta of the new docs site at algolia.com/doc-beta! 🎉
Guides / Building Search UI / UI & UX patterns

Implement the OpenSearch protocol with Angular InstantSearch

Angular InstantSearch isn’t compatible with Angular’s Ivy view engine. We’re investigating how best to support this. For more information and to vote for Algolia’s support of Angular 16 and beyond, see the GitHub issue Algolia Support for 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?