Hello, World: Getting Started with IE8 Visual Search
Hello,
My name is Sébastien Zimmermann. I’m the developer owner for the Visual Search Feature, which Sharon already described in detail. I also own the Accelerators Button Feature, and during IE7 worked on Setup and Phishing Filter—now “SmartScreen® Filter”.
In this post, I would like to get you started on creating your own Visual Search service/provider for Internet Explorer 8. If you own or develop websites of any kind—even if it’s a small website or an intranet site—this post is for you.
Making your website available for search from within the browser enables your customers/users to access your website whenever they need a service from it, without having them type your full web address. Additionally, you (and your brand) are always there with them, right in their browser. The more useful the service, the more likely users are to install it to have an ongoing connection with your website.
To keep things simple, I will take the “Hello, World!” approach: give you the basics so you can quickly get your service running. To keep things simple, this service won’t even be dynamic at first. Once the foundations are there, it will be easy for you to tailor the sample to your own needs, no matter what language your pages are written in.
For the sake of simplicity, I assume in this post that your website is at http://www.example.com—please replace all references of this domain with your own website domain.
Defining Your Service
Before users can install your service, you’ll first need to define it in a way the browser can understand, i.e. through the OpenSearch Description XML file.
Copy the following code and paste it into a file that you’ll put at the root of your website. We’ll name it opensearch.xml, so it will be accessible by anyone at http://www.example.com/opensearch.xml:
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>example Search</ShortName>
<Url type="text/html" template="http://www.example.com/results.aspx?q={searchTerms}" />
<Url type="application/x-suggestions+xml" template="http://www.example.com/suggestions.xml"/>
<Image height="16" width="16" type="image/icon">http://www.example.com/favicon.ico</Image>
</OpenSearchDescription>
There are three important pieces we define in this file:
- A Results Page URL whose MIME type is
text/html, where the user will land after a search—here, results.aspx. The “{searchTerms}” part will automatically be replaced by IE with the user’s search terms. In this sample, I assume your website has an integrated search engine. If it doesn’t, and unless it’s an intranet website, you may replace that URL with the following one instead, which will search your domain using live.com:
http://search.live.com/results.aspx?q=site:www.example.com+{searchTerms}
- A Suggestions Service to assist users while typing their search queries—here,
suggestions.xml. If you do not want to have a suggestions service, you may omit this line—IE will handle it just fine. Also, if you already have a suggestion service available that uses JSON instead of XML, you may use its URL instead—just replace the application/x-suggestions+xml MIME type with application/x-suggestions+json.
- An Icon—here we made a reference to a
favicon.ico file in the root of your website. This is the icon that will be used as a button in the QuickPick—the row of search provider buttons at the bottom of the search dropdown, pictured above. If you don’t have an icon for now, IE will choose a non-descript default for you, just remove the whole line. But it’s better if you have one—this allows users to recognize your website and/or brand.
Note: for your OpenSearch file to work properly in IE7, it is important that the URL of type text/html appears first in your file, before the one of type application/x-suggestions+xml or application/x-suggestions+json.
Making Your Service Discoverable
Next, you’ll need to tell the browser where to find your service description—i.e. the opensearch.xml file you just created. This is easy; just add the following line somewhere in the <head /> section of any web page where you want to make your service available:
<link rel="search" type="application/opensearchdescription+xml" href="http://blogs.msdn.com/opensearch.xml" title="example Search" />
That’s it. Try loading the page: you’ll notice that the down-arrow next to the search box has lit (
). Click the arrow and you’ll now be able to add your very own service in IE!
In addition, you may want to programmatically enable the user to add your provider to IE. Just add a hyperlink or button on your page that calls the AddSearchProvider() method, referencing the description file:
<a href="javascript:window.external.AddSearchProvider('/opensearch.xml')">Click here to add my search engine to IE8!</a>
Note: to check if the user has already installed your provider, you’ll want to use the IsSearchProviderInstalled() method.
Finally, when your service is installed, you’ll automatically be featured on the Accelerators button (
) without any additional work. Select some text, click on the button, then on “More Accelerators.” Choose your service and it will be called with the text you just selected. Note that you may add support for Accelerator Previews directly from the OpenSearch file. This is beyond the scope of this post, but more information is available here.
Implementing Visual Search Suggestions
Now that your service is described, let’s implement suggestions.xml. Here, I’m going to use a sample that goes over most features to give you the basics.
Ok, so let’s copy the following and paste it into suggestions.xml, at the root of your website:
<?xml version="1.0"?>
<SearchSuggestion>
<Query>test</Query> <!-- Note: This sample will only work when you type "test" in the search box! -->
<Section>
<Item>
<Text>Hello, World!</Text>
<Url>http://www.webstandards.org/files/acid2/test.html#top</Url>
<Description>Your Visual Search service is working!</Description>
<Image width="100" height="100" alt="Acid2 Smiley" align="top"
source="http://ieblog.members.winisp.net/images/acid2smiley.png" />
</Item>
<Separator title="This is a separator" />
<Item>
<Text>This is a simple text suggestion</Text>
</Item>
<Item>
<Text>And another one with description</Text>
<Description>This is the description</Description>
</Item>
<Item>
<Text>This is a text suggestion with an image</Text>
<Image width="16" height="16" alt="Acid2 Smiley" align="middle"
source="http://ieblog.members.winisp.net/images/acid2smiley.png" />
</Item>
<Item>
<Text>This is a suggestion with a link and an image</Text>
<Url>http://www.live.com/results.aspx?q=Hello+World</Url>
<Image width="16" height="16" alt="Acid2 Smiley" align="middle"
source="http://ieblog.members.winisp.net/images/acid2smiley.png" />
</Item>
</Section>
</SearchSuggestion>
And voilà! If you type “test” in your search box after selecting your service, you’ll see the cool suggestions featured at the beginning of this post. Note that anything else but “test” won’t work, because IE checks if the <Query /> tag matches what’s in the search box.
If you are using ASP.NET, try this for something a little more dynamic (pictured on the left): rename suggestions.xml to suggestions.aspx, change the URL of type application/x-suggestions+xml in the OpenSearch Description file to http://www.example.com/suggestions.aspx?q={searchTerms}, and re-install your service in the browser (remove it first through Tools->Manage Add-Ons). Then, replace the first couple lines of suggestions.aspx with the following and try searching with your service again:
<%@ Page ContentType="text/xml" Language="C#" %>
<%@ OutputCache Location="None" %><?xml version="1.0"?>
<SearchSuggestion>
<Query><%=HttpUtility.HtmlEncode(Request["q"])%></Query>
<Section title="example Search">
<Item>
<Text>You typed: <%=HttpUtility.HtmlEncode(Request["q"])%></Text>
</Item>
<Separator />
<!-- The rest of the file comes here -->
<Item>
<Text>Hello, World!</Text>
<Url>http://www.webstandards.org/files/acid2/test.html#top</Url>
<Description>Your Visual Search service is working!</Description>
<Image width="100" height="100" alt="Acid2 Smiley" align="top"
source="http://ieblog.members.winisp.net/images/acid2smiley.png" />
</Item>
...
Conclusion
The first step being the hardest, I hope this post succeeded in making it easier for you to get started. I look forward to see how you will creatively use the features in IE8 Visual Search to help your users quickly get to things they want on your site. If you need to dig deeper after reading this post, our writers created an excellent “Search Provider Extensibility” article on MSDN.
Now, it is up to you to develop amazing services using this feature. Inspire yourself from the services already available on the IE8 Gallery, and explore the possibilities.
The QuickPick menu makes “vertical” searches—such as Wikipedia, Amazon, and most likely your website—more visible and accessible, and enables users to quickly target their search on your service. So whether your website is about stock quotes and financial news, or sells music, auto parts, or cake… you can provide a way for your customers to have a deep, useful, ongoing relationship with your website.
I sincerely hope you will have as much fun developing for this feature as we’ve all had designing it. We are interested in learning about the services you create. Let us know about them, and do upload your OpenSearch Description File to the IE8 Gallery once finished for everyone to use.
Happy coding!
Sébastien Zimmermann
Software Design Engineer
edit: updated first image
