Visual Search provider for IE 8 - a task for two tomatoes

The Visual Search provider is one of three new types of extensions in IE 8.0. It will allow users to search for something on your site without going to its pages. And if you add a favicon to the provider, your brand (or rather, a 16 pixel brand) will always be with the user. And most importantly, it will allow you to dilute the dry text of the search results with cute pictures, like this:



And also, you can tell about your provider by uploading it to the gallery of extensions IE 8.0 . Or win a plasma TV by participating in the competition for additions to IE 8.0 , which is held as part of the ReMIX09 conference.


By the way, now there are only 3 visual providers registered there. So if you have something to look for, and even better - a website with the right audience ready to support it in the competition - let's try?
')
All you really need is a method that will return the data found on the request. How it will look depends on your favorite technology and site size. In my case (a mini-games site that I wrote on .NET) it was a simple string comparison in a LINQ query. Someone will set up full text search in MS SQL Server more seriously, but PHP and MySQL followers will probably choose something effective in their arsenal.

If we have such a method, the rest is a task for two tomatoes ¹ , which we will do once or two or three. Moreover, unlike web slices , a simple solution will be good at the same time, without any reservations and nuances.

So, in the best traditions of culinary programs, for successful preparation of the provider we will need:

• Website with pictures and text that we can look for - 1 pc
• The method that will accept the input string entered by the user in the search string and returns a little text and pictures to us - 1 pc.
• The module that the browser will access to get the results in xml format - 1 pc
• A little more xml to describe our provider
• And to complete - a pinch of html to tell browsers what a wonderful provider we have prepared

Well, the products are ready, the water is boiling - we start ...

First, let's work on the basis of our dish - the search method, which in fact will do all the real work. As we agreed, its implementation is entirely on you. It does not matter how it will be done, the main thing is that it:

1. Accepted as input text that the user typed in the search bar:
   And remember, the browser will access your site after each entered letter, so it’s better to search faster.
2. For each item found returned:
   • Headline
   • Short description
   • URL of the page to which we will get by selecting this item when searching
   • Image URL
   In principle, it suffices to return only the title or url. But, if we want to get a beautiful result, we need all the elements.

We turn to the second part: the module of your site, which will call the browser to get xml with search options. You can set the call format yourself, the browser will add to it several parameters describing the request. Only one is required for us, in which the search string will be passed. The request might look something like this:

http://{ }/search.aspx?q={searchTerms}

A module can be implemented in different ways, for example, as IHttpModule or WebService. I preferred the simplest option - the usual .aspx page:

<%@ Page Language="C#" CodeBehind="visual.aspx.cs" Inherits="Play2game.VisualProvider" %> <? xml version ="1.0" ? >
< SearchSuggestion xmlns ="http://schemas.microsoft.com/Search/2008/suggestions" >
< Query >< asp:Literal ID ="ltKeyword" runat ="server" /></ Query >
< Section title =" Play2Game.ru" >
< asp:Literal ID ="ltItems" runat ="server" />
</ Section >
</ SearchSuggestion >

* This source code was highlighted with Source Code Highlighter .

This is the xml that will need to be returned to the browser. It contains two placeholders (as the simplest Literal controls from ASP.NET). Instead of the first one, we need to insert the string that the user was looking for. The browser will check it and display the results only if this string matches the string that it passed to you in the query.

Instead of the second placeholder, we will substitute xml with descriptions of the elements found. Before you deal with him, pay attention to two things:

1. The string <? Xml version = "1.0"?> Is on the same line as the page declaration is not accidental. If you write it from a new line (as I did, because I hate crookedly formatted text), the resulting xml will begin with a carriage return character and it will not be recognized by the browser (and you will see the error message, which means “you have problems, try to change something in your code and try again ").
   
2. In the Section tag, we passed the title title, which will be displayed at the very top, along with the gray line - the separator. If we didn’t do this, IE formed it itself as “{your provider’s name} of options”, which may look rather crooked.

Now go to the xml format with the results themselves (which will be inserted in place of the second placeholder). It is quite simple:

< Item >
<!-- -->
< Text > , </ Text >
<!-- -->
< Description > , . </ Description >
<!-- Url, , -->
< Url > /something.html </ Url >
<!-- Url -->
< Image source ="/something.gif" alt =", " width ="45" height ="45" />
</ Item >
...
< Separator title =" " />
< Item >
...
</ Item >

* This source code was highlighted with Source Code Highlighter .

Here, too, should pay attention to two points. The first is the size of the picture. If you specify them, everything will work fine. But if your images are slightly different in size - this can be a problem. If in the usual html tag img specify only one dimension of the two - your image will be proportionally scaled. Here, such a focus will not work - the pictures simply cease to be displayed (when I tried not to specify the size at all, the images were normally displayed at the first request after connecting the provider, and then they all disappeared). So you have to figure out how to correctly calculate the dimensions.

In this case, I was lucky - all the icons were the same size 44 by 44. At another time it was worse, the pictures were different and if you specify something like 45x45, everything was scaled to this square and ruthlessly distorted. In the end, I added a method that found a physical file, determined its size and correctly entered the width and height attributes. Contrary to fears, it worked quite quickly - thanks to the second point, which we will talk about now.



The fact is that the size of the list is limited - no more than 10 elements will be displayed in it (therefore, it was easy enough to check the sizes of a maximum of 10 files). These elements can be separated by “separators” - the <Separator title = tag “Another list I don’t know what” /> in our xml. However, separators also occupy one of 10 places. So you will need to decide whether to display separators in order to nicely group the found items or display more search results.

I created the Xml with the results using a simple ASP.NET StringBuilder and inserting a placeholder in place. If you are a supporter of difficult, but correct decisions, be sure to read the post " Building an IE8 Visual Friends Provider for my Twitter Friends " in which Guy Burstein tells how to create such a module correctly using WCF REST service and XML serialization.

Almost everything is ready, there are two little things left. The first is to create an xml file with the description of our provider:

<? xml version ="1.0" encoding ="utf-8" ? >
< OpenSearchDescription xmlns ="http://a9.com/-/spec/opensearch/1.1/" xmlns:ie ="http://schemas.microsoft.com/Search/2008/" >
< ShortName > { } </ ShortName >
< Image height ="16" width ="16" type ="image/icon" > http://{ }/favicon.ico </ Image >
< Url type ="text/html" template ="http://{ }/search-page.aspx?q={searchTerms}" />
< Url type ="application/x-suggestions+xml" template ="http://{ }/search.aspx?q={searchTerms}" />
</ OpenSearchDescription >

* This source code was highlighted with Source Code Highlighter .

What you should pay attention here:

1. The <Url type = “text / html” tag specifies the url to be called if the user simply presses input in the search bar and never selects any of the options in the proposed list. Url you can specify arbitrary, as long as it includes placeholder {searchTerms}, the location of which the browser will insert the string entered by the user.
   If your site has already implemented a search - send this url there. If not, trust it to your favorite search engine, like this:
   
   <Url type="text/html" template="http://www.google.com/search?q={searchTerms}"/>
   
   
2. The <Url type = "application / x-suggestions + xml" tag defines the url of our module, which should return xml with the results. The conditions are the same: an arbitrary url with the obligatory placeholder {searchTerms}, instead of which the browser will substitute a string for the search. In addition, you can use a few more placeholders and then the browser will give you a little more useful information. For example, a query of the form:
   
   <Url type="text/html" template="http://www.google.com/search?q={searchTerms}&language={Language}"/>
   
   let you know the user's system language locale. You can learn more about the additional parameters from the documentation, a link to which is given at the end of the article. There is nothing particularly useful, almost everything comes down to determining the size of the drop-down list with the results in order to better calculate the size of pictures and text.

The final touch of the artist - add html tag with a description of the provider in the head of our site. It looks like this:

<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title=" " />



Having found it on our website, IE will turn orange with impatience and promptly add it to the extensions already registered in it.

Please note that the value of the “Title” attribute must exactly match the same name in the “ShortName” tag of the provider's description. If these lines are different, the browser will not believe that this provider has already added and will offer to add it again.

Well, I ask to the table, it has boiled!

Another tip that can simplify your life. The browser caches the resulting xml, so constantly change the words entered during testing. For a while I was sitting under the debugger and unsuccessfully trying to understand why my module was not called when I typed the classic “sdfsdf” (more options “Yukuken” or “qwerty”).

And if you want to understand all the details, take a look at the main Microsoft cookbook: Search Provider Extensibility in Internet Explorer and the XML Search Suggestions Format Specification , as well as read the article by Sebastian Zimmerman (the main developer of the Visual Search function) Hello, World or start working with IE8 Visual Search and a slightly more detailed edition of the article on creating a Visual Search provider for IE 8.0 in my blog " .NET: Notes programmer ."

Enjoy your cooking and winning the competition!

1 XP , . - , . « ».