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

2021-10-20

Author: 吴慧锋

Date: 2008 年10 月21 日

介绍

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

目的

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

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

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

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

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

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

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

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

7. 打开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="https://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>

8. 然后打开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('https://localhost:9999/Provider.xml')"> 

Add Search Provider Example</a> 

</div> 

</form> 

</body> 

</html>

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

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

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

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

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

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

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

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

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

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

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

3. 将下面代码覆盖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"]]

4. 保存后打开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="https://localhost:9999/?q={searchTerms}"/> 

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

template="https://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>

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

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

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

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

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

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

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

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

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

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

3. 将下面代码覆盖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>https://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="https://localhost:9999/1.jpg" alt="Xbox 360 Consoles" width="75" height="75"/> 

<Url>https://localhost:9999/</Url> 

</Item> 

</Section> 

</SearchSuggestion>

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

5. 然后打开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="https://localhost:9999/?q={searchTerms}"/> 

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

template="https://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>

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

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