Clicky

It’s For-IE-day: Week 4 - Jim O'Neil - Technology Evangelist - Site Home - MSDN Blogs

It’s For-IE-day: Week 4

Jim O'Neil

Technology Evangelist

E-mail  Twitter  LinkedIn  RSS Feed  About me

Check out my new blog at http:>//codocent.com

It’s For-IE-day: Week 4

  • Comments 5

IE8

I often think of Internet searching as a U2 moment, you know, “I still haven’t found what I’m looking for…”  Well my life got easier with some of the IE8 search enhancements, and even better, I can add my own custom search providers right in the mix – a great productivity boost when you’re doing domain-specific research.

Let’s start off with some of the user interface enhancements to the search capabilities in IE8, and then we’ll look at how to add in your own search providers.

 

IE Search Box

Search Box The enhancements to the IE Search Box dropdown are pretty dramatic in IE8 as you can see to the right.  First of all, there’s highlighting to show where your search term occurs, but notice there’s actually two sections of search terms.  The first has ‘suggestions’ offered by your search provider, so as you enter your criteria a ‘back-channel’ to your provider is offering its best guess on what you might be looking for.  Below the suggestions are a combined history of the terms you’ve looked up before and the sites in your history.  Sometimes you stumble upon a page without searching, and when you try to go back to it, you can’t find it… now you can, because the history is part of the search domain too.  By the way, you can use the address bar too for this same functionality; just preface your search term with a ? and space, and it will behave just like the search box, as you can see below.

Address Bar

 

Search Providers are Accelerators Too!

Your search providers are automatically picked up as IE8 Accelerators as well.  I’ll talk more in depth about accelerators in a future post (for now, check out Dr. Z’s Channel 9 video on the topic).  For example, while reading the Red Sox page below, if I now want to search for “Mark Teixeira”, I can simply highlight the text, bring up the context menu and use the Live Search accelerator.  I’ll then get a new search result page opened in a new tab.

Search Accelerator 

By the way, here’s another cool feature that is manifested by the search above.  Notice the tabs on IE below are color-coded.  The first two, for the Red Sox and Mark Teixeira, are blue, and the second pair, resulting from a separate search session on the Boston Celtics are purple.  The color coding is delimiting various tab groups, namely pages you’ve browsed to as part of a single linked session.  Since I got to the Mark Texeira page via a search from the Red Sox page, they are in the same group.  Likewise, my Celtics excursion was from a completely new search on the Search Box.  A context menu on the tabs themselves allows you to close either only the tab or the entire group – a nifty way to keep yourself organized in your browser sessions.

IE Tab Groups 

 

 

Adding Other Search Providers

Wikipedia Search ProviderFrom the Search Box dropdown, you can also navigate to the Search Providers Add-ons Gallery, where you can pull in search providers from Google, Yahoo, e-Bay, Wikipedia, Amazon and more.

Wikipedia’s, for instance, has Visual Search capability, so once I add it to my search provider list and look up a term, I get a display like the one to the right, showing images where provided by the Wikipedia suggestion engine.

By the way, wondering what the heck that last entry (US Airways Flight 1549) has to do with cactus?  This was the flight that pilot Chesley Sullenberger successfully ditched in the Hudson River in January after engines failed upon hitting a flock of birds on takeoff.  “Cactus 1549” was the call sign of that flight.

 

Find on This Page

This is probably my favorite search feature in IE8, a great usability improvement from the Find dialog of IE7 (and prior days) with its lame Previous and Next buttons.   In IE8, the Find on this Page… feature gives me a lot of information, right where I want it:

  • Number of times search term is found
  • Highlighting in page while you type (below I searched for “Lester”)
  • Options for whole-word-only or case-sensitive match
  • Navigation among the options

Search on Page

 

Roll Your Own Search Provider

As I mentioned earlier, the Search Providers Add-ons Gallery contains a number of other search providers you can add on to IE8 with the click of a button, but what if your favorite site isn’t there?  Well, create your own! 

The Search Provider feature in IE8 leverages OpenSearch, a collaborative community formed by Amazon and A9 that has created an open specification for describing search providers and results.  It’s actually already used by IE7 as well as Firefox.  Let’s walk through the process of getting our own provider set up.

Many of you know that I’m also a Latin Geek, and since one of the more popular classical reference sites is the Perseus Digital Library hosted at Tufts University, I’ll create a search provider for that resource.

Creating an OpenSearch Description Document

To start, we need to create an OpenSearch description document for the Perseus search engine and host it on a server.  It’s just an XML document with tags that describe the search engine, including (among others)

  • the provider name,
  • the URL, and
  • an icon to display alongside the provider in IE.

Below, for example, is an OpenSearch Description file for the Perseus search service (note, I added a line break in the template value because of space constraints). 

  • The Url tag is the operative one here, and the template attribute specifies the search URL for the provider.  The {searchTerms} literal is a placeholder for the search term you type into IE so that it can be passed on to the search provider.  There’s actually a few more entries you can add into the template as documented here
  • The ShortName tag is what is used in IE to display the provider name, and there’s also an Icon tag that’s recommended to give a visual cue for the provider; I’ve left that out for the moment.
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <ShortName>Perseus Digital Library</ShortName>
    <Url type="text/html" 
         template="http://www.perseus.tufts.edu/hopper/
                   searchresults.jsp?q={searchTerms}" />
</OpenSearchDescription>

 

Installing the Search Provider

With the search description file in place on your server (or someone else’s for that matter!), you have two options to have users install your search provider:

  • include an embedded link to the search provider description, or
  • invoke a JavaScript method to install the provider.

If you include an embedded link, such as the one I’ve put on this page, the IE Search Box dropdown arrow will glow orange as a visual indicator that a new provider is available.  You can then access the dropdown to install the provider.  Here’s the link element I used.  [Note, the page URL ends in .ashx due to the mechanism we use to upload files to Community Server.  If you click the link below, you’ll see the source XML file.]

<link title="Perseus Digital Library" rel="search" type="application/opensearchdescription+xml" href="http://blogs.msdn.com/jimoneil/attachment/9508796.ashx”>

Detecting the orange glow is pretty subtle, so you can also be a bit more blatant and include a button or link in your page that uses a little JavaScript to install the provider, like the following:

which has this markup behind it:

<p align="center">
<input type="button" value="Add Perseus Search" onclick='window.external.AddSearchProvider("http://blogs.msdn.com/jimoneil/attachment/9508796.ashx");' >
</p>

 

Search Suggestions

The other half of a search provider is coming up with suggestions for search terms.  Search suggestions are fed back to the client as he or she types into the Search Box.  If you run Fiddler, for instance, you can see the suggestions for Live Search go through an ASPX page on api.search.live.com, and as I type each letter of my query string (“Red”), a new request goes across.

Search Suggestion Request

The response to these requests are suggestions that IE then populates in the Search Box.  Here’s the stream sent back from the second request, for “Re”

<?xml version="1.0" encoding="utf-8" ?>
<?pageview_candidate?>
<SearchSuggestion xmlns="http://schemas.microsoft.com/Search/2008/suggestions">
  <Query>Re</Query>
  <Section>
    <Item>
      <Text>recipes</Text>
    </Item>
    <Item>
      <Text>remax</Text>
    </Item>
    <Item>
      <Text>rediff</Text>
    </Item>
    <Item>
      <Text>regions bank</Text>
    </Item>
    <Item>
      <Text>rediffmail</Text>
    </Item>
    <Item>
      <Text>rei</Text>
    </Item>
    <Item>
      <Text>regions</Text>
    </Item>
    <Item>
      <Text>resume</Text>
    </Item>
    <Item>
      <Text>real estate</Text>
    </Item>
    <Item>
      <Text>realtor</Text>
    </Item>
  </Section>
</SearchSuggestion>

Live Search returns suggestions in an XML format, but JSON (JavaScript Object Notation) is also supported.   The XML format has a few advantages over JSON; it can return visual suggestions, split suggestions into sections, and give a title to each suggestion section.

My Perseus example isn’t outfitted with a suggestion provider (it’s a little bit out of scope for a blog post!), but had I included such a facility, my OpenSearch description XML file would simply include an additional Url tag (after the actual search Url tag) corresponding to the URL template of suggestion provider and specifying a type of either

  • application/x-suggestions+json, or
  • application/x-suggestions+xml

 

Managing Your Providers

Assuming I did this right(!), you should have been able to install my Perseus search provider via the Search Box dropdown or by pressing the button in the section above.   Once, installed you can make it your default provider as well as access it via the browser page’s context menu… in fact, give it a try on the following.  Just highlight the name, right-mouse click, and select the “Search with Perseus Digital Library” item in the All Accelerators cascading menu.

 

Pterelaus Caligula Mucius Scaevola

 

If you decide you no longer want a given search provider, you can uninstall it via the Manage Add-ons dialog accessible via the Tools>Manage Add-ons menu item and the Manage Search Providers option directly on the Search Box dropdown menu.

Manage Add-ons dialog

That should do it for this week!  Since we broached the subject of accelerators here, we’ll tackle that topic next week.

Join the Conversation
Leave a Comment
  • Please add 3 and 8 and type the answer here:
  • Post
Read What Other's Think
  • no offense Jim but still lagging behind the fox.  see how innovation happens there.  e.g. check out the new tab king extension (http://www.newtabking.com) to see how a browser new tab should look like and then think IE8-wise...

  • no offense taken, I didn't write it :)  However, what you bring up here specifically is an add-in, not Firefox 'out-of-the-box', so is it truly a fair comparison?  And even with the add-in, it's almost tit-for-tat with the exception of the pages-most-recently-used display which is pretty cool.  I'm not sure though if a similar customization could be created for IE just as it was for Firefox?

  • Nice article on IE8, Jim. See: http://bit.ly/vJKbW

    For your readers who still use Firefox and are new to IE8, I wanted your readers to be aware that Firefox has a version of Accelerators too, it is called “KALLOUT - Accelerators for Firefox” It’s available as a free add-on through Firefox. See: http://bit.ly/vJKbW

    IE8 is great and the accelerators developed for IE8 will actually work directly with KallOut-Accelerators for Firefox so users can stick with Firefox if they want and still get the benefits of the community-developed accelerators.

    EL

  • Thanks for the info, Ed.  I also noticed at least on other Firefox add-on there: http://is.gd/1YFi.  Not sure where they may overlap/differ in functionality though, but I'll make mention of them in this week's post.

  • Last week when I wrote about some of the new search capabilities in IE8, I touched on the accelerator

Page 1 of 1 (5 items)