• 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 的时候大家都照了那么多照片, 给我发点!
  • 相关阅读:
    在SQL Server中使用NewID()随机取得某行
    委托和事件：第 3 页 事件的由来
    case when then else 详解
    spring-boot-starter-security Spring Boot中集成Spring Security
    spring-boot-actuator健康监控
    汉字转拼音开源工具包Jpinyin介绍
    JAVA实现汉字转换为拼音 pinyin4j/JPinyin
    Spring MVC 后端接口支持跨域CORS调用
    web开发-CORS支持
    maven POM.xml 标签详解
  • 原文地址：https://www.cnblogs.com/WilsonWu/p/1315580.html
Copyright © 2020-2023  润新知