Implement the OpenSearch Protocol with Vue InstantSearch
On this page
This page describes how to implement the OpenSearch protocol with Vue 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 thetemplateattribute, 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
