备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2008-10-21 1138
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 介绍 本文会为大家展示如果使用VS 2008 来创建基于IE8 的搜索提供程序, 以及在其中添加文本搜索建议和带有图片的搜索建议. 目的 学习如何使用VS 2008 来制作自己的搜索提供程序 步骤1 – 创建搜索提供程序项目 打开VS 2008, 选择File -> New ...

介绍

本文会为大家展示如果使用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 的时候大家都照了那么多照片, 给我发点!

文章标签：
智能开放搜索 OpenSearch
C#
Web App开发
数据格式
XML
C++
关键词：
IE程序
IE搜索程序
相关实践学习
基于OpenSearch搭建高质量商品搜索服务
本场景主要介绍开放搜索（OpenSearch）打造独有的电商行业垂直解决方案，模板内置电商查询分析、排序表达式及行业算法能力，沉浸式体验更高性能和效果的智能搜索服务，助力企业在线业务智能增长。
iwilsonwu
目录
相关文章
熊泽-学习中的苦与乐
|
9月前
|
Web App开发 UED C++
在chrome浏览器中调用IE浏览器并访问（openIE.reg自定义协议）
在chrome浏览器中调用IE浏览器并访问（openIE.reg自定义协议）
熊泽-学习中的苦与乐
388 0
技术小阿哥
|
Windows
Windows Server 2008 定义IE浏览器主页和搜索提供程序
技术小阿哥
1065 0
科技小先锋
|
Shell
IE地址栏百度搜索经常出现乱码，打开网页搜索就不会出现这种情况的解决方法
科技小先锋
1536 0
科技小能手
|
Windows
怎样自定义IE收藏夹存放位置
科技小能手
1089 0
华章计算机
|
Web App开发 测试技术 iOS开发
《Web测试囧事》——1.11　IE 9不支持占位符导致搜索行为异常
华章计算机
1736 0
double2li
|
Web App开发 JavaScript 前端开发
NPAPI——实现非IE浏览器的类似ActiveX的本地程序(插件)调用
  一.Netscape Plugin Interface(NPAPI) 大致的说明可以看下官方文档Plugin 本文主要针对于JavaScript与插件交互部分做一些交流,比如用于数字证书的操作(淘宝和支付宝的插件),用于播放的flash player插件等 与javascri...
double2li
1982 0
鋒o丫头
|
前端开发
CSS-自定义高度的元素背景图如何自适应以及after伪类在ie下的处理
我都好久没更新了！ 遇到一个效果，之前没有考虑清楚，设置了固定高度，到了后边，产品要加长，我就觉得设计得从新弄张长点的背景图！这不多余么？ 其实分析原图还是可以再切分，再细化到不用改设计图，让我们前端页面各种适应，做到重复利用。
鋒o丫头
1152 0
shy丶gril
HTML自定义对象与属性（谷歌，火狐，IE9浏览器没问题）
shy丶gril
1448 0
极客小俊
|
6月前
|
Web App开发 前端开发 JavaScript
Edge浏览器没有让我失望! 今天终于可以在win10中模拟IE内核进行前端测试了!
在win10中模拟IE内核进行前端测试
极客小俊
126 1
Edge浏览器没有让我失望! 今天终于可以在win10中模拟IE内核进行前端测试了!
sunrr
|
1月前
|
存储 机器人
在阿里云RPA中，你可以通过以下步骤来更改默认唤醒IE浏览器的地址
【2月更文挑战第28天】在阿里云RPA中，你可以通过以下步骤来更改默认唤醒IE浏览器的地址
sunrr
19 1