IE 8 中自定义自己的 Search Provider (搜索提供程序)

介绍

本文会为大家展示如果使用VS 2008 来创建基于IE8 的搜索提供程序, 以及在其中添加文本搜索建议和带有图片的搜索建议.

目的

  • 学习如何使用VS 2008 来制作自己的搜索提供程序

步骤1 – 创建搜索提供程序项目

  1. 打开VS 2008, 选择File -> New -> Project…:

clip_image006

clip_image008

  1. 在弹出的项目创建向导种选择Visual C# -> Web -> ASP.NET Web Application:

clip_image010

  1. 输入项目名称为 SearchDemo并点击OK按钮创建项目:

clip_image012

clip_image014

  1. 在SearchDemo项目上右击选择其Properties, 在属性窗口中选择Web, 并将其Specific Port设置为9999:

clip_image016

clip_image018

  1. 在SearchDemo项目上右击选择Add -> New Item…:

clip_image020

  1. 在弹出的新建对话框中选择XML File, 并输入文件名为Provider.xml, 点击Add按钮创建文件:

clip_image022

clip_image024

  1. 打开Provider.xml文件将下面代码覆盖该文件原有内容:
<?xml version="1.0" encoding="utf-8" ?> 

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

<ShortName>Web Search</ShortName> 

<Description>Use SSW to search the Web.</Description> 

<Tags>example web</Tags> 

<Contact>admin@ssw.com.au</Contact>> 

<Url type="text/html" 

template="http://localhost:9999/?q={searchTerms}"/> 

<LongName>Test Web Search</LongName> 

<Query role="example" searchTerms="cat" /> 

<Developer>SSW Development Team</Developer> 

<Attribution> 

Search data Copyright 2005, SSW Inc., All Rights Reserved 

</Attribution> 

<SyndicationRight>open</SyndicationRight> 

<AdultContent>false</AdultContent> 

<Language>en-au</Language> 

<OutputEncoding>UTF-8</OutputEncoding> 

<InputEncoding>UTF-8</InputEncoding> 

</OpenSearchDescription>

 

  1. 然后打开Default.aspx页面, 将下面内容覆盖该页面中所有内容:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SearchDemo._Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 

<head id="Head1" runat="server"> 

<title></title> 

</head> 

<body> 

<form id="form1" runat="server"> 

<div> 

<a href="#" onclick="window.external.AddSearchProvider('http://localhost:9999/Provider.xml')"> 

Add Search Provider Example</a> 

</div> 

</form> 

</body> 

</html>

 

  1. 然后选择Debug进行调试:

clip_image026

  1. 第一次调试会弹出如下对话框, 选择OK即可:

clip_image028

  1. 调试运行成功后可以看到在IE中有如下界面:

clip_image030

  1. 选择Add Search Provider Example链接, 在弹出的窗口中选择OK进行我们搜索提供程序的添加:

clip_image032

  1. 添加完成后选择IE地址栏右侧搜索栏的下拉箭头, 可以看到我们制作的Web Search已经被成功添加了:

clip_image034

  1. 点击选择Web Search搜索提供程序, 在搜索栏中随便输入一个关键字并点击clip_image036按钮:

clip_image038

  1. 最后看到地址栏地址如下则表示我们的搜索提供程序创建成功:

clip_image040

  1. 这样我们创建完成了一个最基本的搜索提供程序, 然后我们对其进行扩展,

步骤2 – 添加基于JSON方式的搜索建议

  1. 在SearchDemo项目上右击选择Add -> New Item…:

clip_image020[1]

  1. 在弹出的新建对话框中选择Web Form, 并输入文件名为GetInfo.aspx, 点击Add按钮创建文件:

clip_image042

clip_image044

  1. 将下面代码覆盖GetInfo.aspx中已有内容:

 

<%@ Page Language="C#" AutoEventWireup="true" Inherits="SearchDemo.GetInfo" %> 

["<%=HttpUtility.HtmlEncode(Request["q"])%>", 

["<%=HttpUtility.HtmlEncode(Request["q"])%>","<%=HttpUtility.HtmlEncode(Request["q"])%> and more","<%=HttpUtility.HtmlEncode(Request["q"])%> ","search <%=HttpUtility.HtmlEncode(Request["q"])%> in Google","<%=HttpUtility.HtmlEncode(Request["q"])%>.com","<%=HttpUtility.HtmlEncode(Request["q"])%> and so on"], 

["7,390,000 results","17,900,000 results","25,700,000 results","1,220,000,000 results","1 result","17,600,000 results"], 

["http://example.com?q=sears","http://example.com?q=search+engines","http://example.com?q=search+engine","http://example.com?q=search","http://example.com?q=sears.com","http://example.com?q=seattle+times"]]

 

  1. 保存后打开Provider.xml文件将所有内容替换为如下内容:
<?xml version="1.0" encoding="utf-8" ?> 

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

<ShortName>Web Search</ShortName> 

<Description>Use SSW to search the Web.</Description> 

<Tags>example web</Tags> 

<Contact>admin@ssw.com.au</Contact>> 

<Url type="text/html" 

template="http://localhost:9999/?q={searchTerms}"/> 

<Url type="application/x-suggestions+json" 

template="http://localhost:9999/GetInfo.aspx?q={searchTerms}" /> 

<LongName>Test Web Search</LongName> 

<Query role="example" searchTerms="cat" /> 

<Developer>SSW Development Team</Developer> 

<Attribution> 

Search data Copyright 2005, SSW Inc., All Rights Reserved 

</Attribution> 

<SyndicationRight>open</SyndicationRight> 

<AdultContent>false</AdultContent> 

<Language>en-au</Language> 

<OutputEncoding>UTF-8</OutputEncoding> 

<InputEncoding>UTF-8</InputEncoding> 

</OpenSearchDescription>

 

黄色高亮部分为在原来基础添加的内容, 也可以直接添加这部分内容.

  1. 添加完成后点击调试按钮进行调试, 并选择搜索框后的下拉按钮中的Manage Search Providers:

clip_image046

  1. 在窗口中移除我们之前添加的Web Search搜索提供程序:

clip_image048

  1. 返回 http://localhost:9999/ 页面后点击页面上的Add Search Provider Example 链接并安装搜索提供程序:

clip_image050

  1. 然后并选择搜索框后的下拉按钮中的Web Search:

clip_image052

  1. 选择后在搜索框中输入任意关键字:

clip_image054

  1. 这里我们可以看到搜索建议效果.

步骤3 – 添加基于XML方式的带有图片的搜索建议

  1. 在SearchDemo项目上右击选择Add -> New Item…:

clip_image020[2]

  1. 在弹出的新建对话框中选择Web Form, 并输入文件名为GetVInfo.aspx, 点击Add按钮创建文件:

clip_image056

clip_image058

  1. 将下面代码覆盖GetVInfo.aspx中已有内容:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetVInfo.aspx.cs" Inherits="SearchDemo.GetVInfo" %> 

<SearchSuggestion> 

<Query><%=HttpUtility.HtmlEncode(Request["q"])%></Query> 

<Section> 

<Item> 

<Text><%=HttpUtility.HtmlEncode(Request["q"])%> 360</Text> 

<Description>The official Xbox website from Microsoft</Description> 

<Url>http://www.xbox.com</Url> 

</Item> 

<Item> 

<Text><%=HttpUtility.HtmlEncode(Request["q"])%> cheats</Text> 

<Description>Codes and walkthroughs</Description> 

</Item> 

<Item> 

<Text><%=HttpUtility.HtmlEncode(Request["q"])%> games</Text> 

</Item> 

<Item> 

<Text><%=HttpUtility.HtmlEncode(Request["q"])%> Consoles</Text> 

<Description>Game console systems and packages at a great deal.</Description> 

<Image source="http://localhost:9999/1.jpg" alt="Xbox 360 Consoles" width="75" height="75"/> 

<Url>http://localhost:9999/</Url> 

</Item> 

</Section> 

</SearchSuggestion>

 

  1. 任意找一张图片(可以使用我们和文档一同提供的图片1.jpg)命名为1.jpg, 并辅之该图片, 选择项目SearchDemo后, 按Ctrl+V键进行粘贴, 这样该图片就加入到项目SearchDemo根目录了:

clip_image060

  1. 然后打开Provider.xml文件将所有内容替换为如下内容:
<?xml version="1.0" encoding="utf-8" ?> 

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

<ShortName>Web Search</ShortName> 

<Description>Use SSW to search the Web.</Description> 

<Tags>example web</Tags> 

<Contact>admin@ssw.com.au</Contact>> 

<Url type="text/html" 

template="http://localhost:9999/?q={searchTerms}"/> 

<Url type="application/x-suggestions+xml" 

template="http://localhost:9999/GetVInfo.aspx?q={searchTerms}" /> 

<LongName>Test Web Search</LongName> 

<Query role="example" searchTerms="cat" /> 

<Developer>SSW Development Team</Developer> 

<Attribution> 

Search data Copyright 2005, SSW Inc., All Rights Reserved 

</Attribution> 

<SyndicationRight>open</SyndicationRight> 

<AdultContent>false</AdultContent> 

<Language>en-au</Language> 

<OutputEncoding>UTF-8</OutputEncoding> 

<InputEncoding>UTF-8</InputEncoding> 

</OpenSearchDescription>

 

黄色高亮部分为在原来基础修改的内容, 也可以直接添加这部分内容.

  1. 添加完成后点击调试按钮进行调试, 并选择搜索框后的下拉按钮中的Manage Search Providers:

clip_image046[1]

  1. 在窗口中移除我们之前添加的Web Search搜索提供程序:

clip_image048[1]

  1. 返回 http://localhost:9999/ 页面后点击页面上的Add Search Provider Example 链接并安装搜索提供程序:

clip_image050[1]

  1. 然后并选择搜索框后的下拉按钮中的Web Search:

clip_image052[1]

  1. 选择后在搜索框中输入任意关键字:

clip_image062

  1. 这里我们可以看到带有图片的搜索建议效果.

总结

在本文中我们学习了如何定制自己的搜索提供程序, 以及添加两种样式的搜索建议, 这些只是一个基础的知识, 在其中还可以扩展很多东西.

 

PS: Open Day 的时候大家都照了那么多照片, 给我发点!

posted @ 2008-10-21 08:23  WilsonWu  阅读(5876)  评论(2)  编辑  收藏  举报