One of my favorite time saving features in most current web browsers, besides tabbed browsing, is the ability to search the web from any web page. Just type your search query in the search bar at the top of the browser and hit enter. Most people know that you can search Live.com, Google, Lycos, or whatever your favorite search engine is. What many people do not know is that you can configure your browser to search using any search engine, or configure your web site to allow other people to search using your own site's search engine.
Creating custom search providers first drew my attention a few years ago while I was working as an embedded systems engineer. I constantly found myself searching Mouser, Digi-Key, Grainger, and Jameco by part numbers and keywords. If you poke around the IE7 search applet, you will find a link to a page for adding common search engines (by clicking on Find More Providers...). This page also allows you to create custom search providers by filling out a form. You can also create a simple web page that will do this for you.
I wanted a quick way to paste a part number into a search box and go directly to the search results, without having to navigate my favorites and find the search engine on some web site. With this goal in mind, I set out to create a web page that would allow the user to automatically add search providers for a bunch of web sites all at once.
This is a two step process:
- Create Open Search descriptions in a separate XML file for each search engine that you want to add.
- Make a web page that links to each of these search descriptions.
The rest of this blog post will walk through these steps for creating a Digi-Key search provider.
1. Creating the Open Search Description
Create an XML file locally or on your web server that contains a search description like the following, where the template attribute of the URL element contains the search string used on your target web site and has {searchTerms} in the place of the search query.
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Digi-Key</ShortName>
<Description>Search Digi-Key Part # / Keywords.</Description>
<URL type="text/html"
template="http://search.digikey.com/scripts/DkSearch/dksus.dll?keywords={searchTerms}"/>
</OpenSearchDescription>
2. Adding Links to the Search Descriptions
In the head element of your web page, add link elements for each search provider you wish to include.
<link title="Digi-Key"
rel="search"
type="application/opensearchdescription+xml"
href="http://www.chrisellsworth.com/SearchProviders/digikey-search.xml">
Viewing the Web Page
When you open a web page containing search link elements, the browser automatically detects them and allows you to search using them or to permanently add them to the search bar. This technique allows you to create a "search provider install" page to quickly install all of your favorite search engines, or to add a custom search provider when people visit your web site (as I do on all of my pages on ChrisEllsworth.com).
You can view the example page I created in this tutorial here. The XML file containing the search descriptor for Digi-Key may be found here.
Important Notes
One common mistake people make is in the the URL encoding for the Open Search Description. If the URL contains any '&' characters, then they must be replaced with &. The same rules need to be applied for white space (%20). Basically, you need to follow the standard URL encoding rules. The other caveat I want to mention is that, in my testing, IE7 only seemed to list the first 3 search link entries on a page, although Firefox listed them all.
I hope you find this helpful. Please post any questions in the comments below, or email them directly to me by clicking on the "email me" link in the menu bar at the right.