RSPB LearnBirds

OpenSearch

Yesterday, whilst working on a client’s Wordpress website I took the opportunity to implement a ‘quick search’ search feature. Using the OpenSearch standard, the ‘quick search’ is supported by Internet Explorer 7 and the latest versions of Firefox and the likes of Wikipedia, Google and Amazon already take advantage of the technology.

It allows for the user to search through the content of your website without having to visit it first. Think of it as a remote search form that is always available via the web browser interface.

As it was something entirely new to me, I did about of snooping around Wikipedia’s source code to understand how they had implemented it, and this is what I found:

<link rel="search" type="application/opensearchdescription+xml" href="/w/opensearch_desc.php" title="Wikipedia (en)" />

This code is used to tell the web browser that there is ‘quick search’ functionality that can be used, and if it’s correctly implemented you should find that where the ‘quick search’ feature in your chosen web browser will indicate a new search provider is available.

However, before it will work you need to create OpenSearch standard document that tells the web browser a little bit more about the quick search feature. Using the Wikipedia’s implementation as an example:

<?xml version="1.0"?>

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">

<ShortName>Wikipedia (en)</ShortName>

<Description>Wikipedia (en)</Description>

<Image height="16" width="16" type="image/x-icon">http://en.wikipedia.org/favicon.ico</Image>

<Url type="text/html" method="get" template="http://en.wikipedia.org/w/index.php?title=Special:Search&search={searchTerms}"/>

<Url type="application/x-suggestions+json" method="GET" template="http://en.wikipedia.org/w/api.php?action=opensearch&search={searchTerms}&namespace=0"/>

</OpenSearchDescription>

As you can see, it is an XML formatted document which contains several nodes needed for the quick search functionality.

• Shortname - This is the name that is displayed by the web browser in the dropdown list of the available search providers
• Description - Though not currently used by the web browsers, it allows you to clearly explain the functionality of the quick search
• Image - This is the image displayed in the available search provider dropdown list (and next to the quick search input in Firefox)
• Url - This is the http:// reference to the search form you want to use

You will notice that the Wikipedia example makes use of a .ico file for the Image value, whilst the OpenSearch standard suggests a base64 value is used, I was only able to get the image to display using an absolute link to a file similar to the Wikipedia example. The Wikipedia example also contains two types of searching; via JSON and via HTML with the relevant links to each form, though only one search type is required.

It is important that {searchTerms} is left within the link to the search form as that’s what is used by the web browser to send the search query to the web form.

Once the quick search has been successfully implemented, you should be able to select it as a search provider from a dropdown list within your web browser, enter a search term and receive some search results.

This entry was posted on Thursday 17th April 2008 at 8:14 pm and is filed under Development, Web Browsers . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.