Internet Explorer 8, del 3 - Sökning

Jag har tidigare publicerat två artiklar på MSDN om vad som är nytt för utvecklare i Internet Explorer 8 och har då tagit upp Web Slices och Accelerators.

Artiklarna kan hittas här:
En rikare upplevelse med Internet Explorer 8: Web Slices
En rikare upplevelse med Internet Explorer 8: Accelerators

De flesta av dagens webbläsare låter användaren söka på till exempel Live Search, Google eller annan sökmotor utan att först behöva surfa dit, utan genom att skriva sökordet direkt i verktygsfältet och sedan komma till resultatsidan på den valda sökmotorn. Internet Explorer 7 var den första versionen av Internet Explorer som hade stöd för detta, och lät utvecklare använda sig av en XML-fil baserad på Open Search för att möjliggöra sökning på deras sidor genom webbläsaren. Att kunna söka på internet har blivit en väldigt stor del i surfandet hos många människor, och att kunna göra det via verktygsfältet har visat sig vara mycket populärt hos användarna.

Som det ser ut idag så läser Internet Explorer in XML-filen och vidarebefordrar sedan besökaren till den sida som han har valt att söka på för att därefter visa resultaten. Internet Explorer 8 går steget längre och gör det möjligt att inte bara kunna söka i verktygsfältet, utan gör det även möjligt att visa resultaten där med en bild samt en beskrivning.

För att kunna använda det här på sin egna sida så använder man precis som innan en XML-fil baserad på Open Search, men lägger till element som beskriver varifrån resultaten skall komma. De i sin tur genereras av en annan XML-fil som innehåller informationen om varje enskilt resultat. Denna fil sparas i webbläsarens cache för att inte belasta servern mer än nödvändigt.

Ett exempel på hur detta kan fungera i praktiken finns redan hos Ebay, som låter användaren söka bland alla produkter och därmed få upp information och bilder på det man har sökt efter, utan att behöva leta runt på deras sökresultatssida.

Ebay har utnyttjat denna funktionalitet genom att först tipsa om populära sökord, och sedan visa populära matchningar baserat på sökordet, då tillsammans med bilder på produkterna samt det senaste budet tillsammans med antalet bud.

Anpassa din sida

För att göra din egen sida sökbar så behöver du lägga till tre saker:

• Ett JavaScript som lägger till din sök-provider i Internet Explorer.
• En XML-fil som beskriver hur Internet Explorer skall utföra de olika stegen (sökningen mot sidan samt vart de olika resultaten skall hämtas).
• En XML-fil med resultaten och som returneras till webbläsaren när använder skriver in sökordet.

För att lägga till din sök-provider så räcker det med att anropa en JavaScript-funktion som tar emot en sökväg till XML-filen som parameter.

window.external.AddSearchProvider('search.xml');

Det som händer när JavaScript-funktionen körs är att Internet Explorer läser igenom innehållet i XML-filen och lägger till sök-.providern bland de andra.

Nästa steg är att skapa XML-filen som förklara för Internet Explorer hur sökningen skall göras.

Ett exempel på hur det kan se ut:

<?xml version="1.0" encoding="iso-8859-1" ?>

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

  <ShortName>Example Search</ShortName>

  <Description>Example.com extended search!</Description>

  <InputEncoding>iso-8859-1</InputEncoding>

  <Image height="16" width="16" type="image/x-icon">http://articles/internetexplorer/favicon.ico</Image>

  <Url type="text/html" method="get" template="http://articles/internetexplorer/search.aspx?q={searchTerms}" />

  <Url type="application/x-suggestions+xml" method="get" template="http://articles/internetexplorer/search.ashx?q={searchTerms}" />

</OpenSearchDescription>

Först måste vi berätta att det är en Open Search-fil som skall läggas till. Detta är en standard som även används av till exempel Firefox, vilket betyder att samma sökning kan användas även där.

De olika elementen som förklarar vad som skall ske när användaren utför sökningen är:

• ShortName – Namn på sökmotorn som syns om användaren inte har skrivit in något i sökrutan.
• Description – Beskrivning för sökningen.
• InputEncoding – Encoding som skall användas vid postning mot söksidan.
• Image – URL till ikonen om en anpassad sådan skall finnas vid sökningen.
• Url – URL till söksidan.
  • Type – Vilken content-type som skall returneras för sökresultaten.
    • Text/html – Tyder på att det är en vanlig sökning där använder har skrivit in sökordet och sedan valt att se sidan med resultaten direkt.
    • Application/x-suggest+xml – Användaren har skrivit något och en lista med sökresultaten returneras i XML-format.
  • Method – Sökningen kan göras antingen med POST eller GET.
  • Template – URL till sidan med resultaten. I exemplet ovan så tar båda url:erna emot en querystring med sökordet. För att visa var sökordet skall komma så används ”{searchTerms}”. Det byts sedan ut mot sökordet som användaren har skrivit in.

Om vi kör JavaScriptet nu så kommer användaren att få en fråga om denne vill lägga till den valda sökmotorn.

Om vi nu skriver in något sökord så kan vi se att det uppstår ett fel i resultatlistan då vi inte har skapat XML-filen som skall.returneras.

Nästa steg är att skapa XML-filen som innehåller resultaten. Detta bör vara någon dynamisk sida som hämtar in resultaten från databasen eller annan källa och sedan returnerar en lista på t.ex. 5 resultat. För många resultat kan leda till att det blir för svårläst att se resultaten.

Själva listan kan vara uppbyggd i flera kategorier med resultat, alla på olika sätt. Om denna typ av sökning skulle användas på ett intranät så skulle vi kunna ha först en lista med olika sidor som innehåller sökordet och sedan en till lista med dokument tillsammans med en genererad bild på dokumentet som visar en liten förhandsgranskning. Om vi istället skulle ha en lista med länkar så skulle vi kunna lägga till ett screenshot på varje sida i länkarkivet.

I exemplet jag tar upp nu så returnerar vi dock en hårdkodad lista med resultat för enkelhetens skull.

<?xml version="1.0" encoding="utf-8" ?>

<SearchSuggestion xmlns="http://opensearch.org/searchsuggest2" version="2">

  <Query>Sökfråga</Query>

  <Section title="Exempel med text">

    <Item>

      <Text>Resultat 1</Text>

      <Url>http://articles/internetexplorer/exempel1.aspx</Url>

    </Item>

    <Item>

      <Text>Resultat 2</Text>

      <Url>http://articles/internetexplorer/exempel2.aspx</Url>

    </Item>

    <Item>

      <Text>Resultat 3</Text>

      <Url>http://articles/internetexplorer/exempel3.aspx</Url>

    </Item>

    <Separator title="Exempel med bilder"/>

    <Item>

      <Text>Resultat 1</Text>

      <Url>http://articles/internetexplorer/exempel1.aspx</Url>

      <Description>Beskrivning för resultat #1</Description>

      <Image source="http://articles/internetexplorer/bild.gif" alt="Bild #1" width="48" height="48" align="top" />

    </Item>

    <Item>

      <Text>Resultat 2</Text>

      <Url>http://articles/internetexplorer/exempel2.aspx</Url>

      <Description>Beskrivning för resultat #2</Description>

      <Image source="http://articles/internetexplorer/bild.gif" alt="Bild #2" width="48" height="48" align="top" />

    </Item>

    <Item>

      <Text>Resultat 3</Text>

      <Url>http://articles/internetexplorer/exempel3.aspx</Url>

      <Description>Beskrivning för resultat #3</Description>

      <Image source="http://articles/internetexplorer/bild.gif" alt="Bild #3" width="48" height="48" align="top" />

    </Item>

  </Section>

</SearchSuggestion>

Här använder vi en annan funktion hos Open Search som låter oss ha olika Items för varje resultat med element som beskriver resultaten.

• Query – Sökfrågan från användaren.
• Section – Sektion med resultat.
  • Item – Ett sökresultat. Har ett attribut för texten som skall visas med listan.
    • Text – Titel för resultatet.
    • Url – Url till resultatet. Detta är en URL som går direkt mot sökträffen, dvs. inte sidan med sökresultaten.
    • Description – Beskrivning för resultatet.
    • Image – En bild som visas tillsammans med sökträffen. Har attribut för storleken samt en alternativ text som visas om inte bilden kan hittas.
• Separator – Visar att en ny sektion skall börja. Har precis som section-elementet ett attribut som anger titel för texten som skall visas.

I exemplet så har vi först en enkel lista med resultat. Den visar träffarna i ren text samt har en länk till dem så att vi enkelt kan komma till önskad sida. Sedan har vi en separator som visar att en ny lista kommer. Denna visar sökträffarna tillsammans med en beskrivning om sökträffen.

När vi har sparat den här filen och skriver in sökordet i sökrutan så skall vi få en lista med sökresultat:

Vi kan alltså genom att först skapa en förklarande XML-fil och sedan generera en utifrån användarens sökord enkelt få till en sökfunktion som låter användaren söka bland innehållet på sidan på ett mycket smidigt sätt då denne inte behöver leta rätt på söksidan först. Har vi dessutom implementerat stöd för Accelerators så ger vi användaren två alternativ att utföra sökningen på – dels genom att skriva in sökordet i sökrutan, men även markera text på en valfri sida för att sedan söka direkt genom en Accelerator. Vad hindrar oss sedan från att göra det möjligt att ha sidan med sökresultat som en Web Slice som automatiskt visar användaren när nya sökresultat dyker upp?