[IE8]开发自己站台的视觉化搜寻(Visual Search)

Posted 2022-10-05 petewell

承继上篇【[IE8]搜寻功能介绍】，IE8新增了视觉式搜寻的功能。当小喵看到这个功能之后，身为Web App Developer的小喵不禁开始想，如果小喵的系统，也能够提供这样的功能给使用者，该有多好。于是小喵开始搜寻撰写这样功能的各项资讯。终于，找出撰写的方式...

缘起

承继上篇【[IE8]搜寻功能介绍】，IE8新增了视觉式搜寻的功能。当小喵看到这个功能之后，身为Web App Developer的小喵不禁开始想，如果小喵的系统，也能够提供这样的功能给使用者，该有多好。于是小喵开始搜寻撰写这样功能的各项资讯。

先看看成果

在还没介绍怎么设计之前，先来看看预期要达到的成果如何。用写的不如用看的，请看以下影片

准备测试数据

为了测试这样的功能，小喵首先找到的这篇【Hello, World: Getting Started with IE8 Visual Search】文章，发现他必须准备产生一些数据，需要有【Text,Url,Description,Images】这些资讯，于是小喵建立一个测试的数据库，安排了一个名称为T1的数据表，里面放了一些测试的数据，相关的数据如下图

OpenSearch.xml

要能够提供Search Provider，需要准备一个OpenSearch.xml的文件在您的项目中，而其他人也是透过这个xml来加入您的Provider，因此我们来看看这个OpenSearch.xml的内容为何

    Topcat Example Search
    
    
    http://[your ip or server name]/tVisualSearch/TOPCAT.ico

其中在[your ip or server name]的地方请改为自己的Server IP或者Server Name。从上面这个文件，我们知道我们需要准备两个程序

• result.aspx(搜寻结果)：当输入完搜寻字符串后，要显示搜寻结果的页面
• suggestions.aspx(搜寻建议)：这个文件所输出的格式是【xml】，是这次的视觉化搜寻最重要的文件

另外，ShortName里面的文字，会是未来在搜寻框中所显示的文字，所以大家可以花花脑力想个宇宙无敌超级厉害的搜寻名称给他唷(小喵的是个简单的范例，就取Topcat Example Search就好)。而Image这个设定的，是个ico文件，也就是当搜寻的时候，在最前方，以及切换搜寻的【图示】这里当然您也可以设计个漂亮的图示放着。

接下来就是来看看要怎么撰写这两个文件

result.aspx

这个其实是当在搜寻的地方按下Enter之后要显示搜寻结果的，所以小喵用最简单的方式，以一个GridView来显示搜寻的结果，相关的程序如下：

result.aspx

    
        
        
        
        
        
            
                ‘
                    Tooltip=‘<%# Eval("Img") %>‘>
            
            
                ‘ />
            
        
    


    
        
    

result.aspx.vb

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim q As String = Request.QueryString("q")
    If q IsNot Nothing Then
        Dim MODEL As String = q & "%"
        Me.SqlDataSource1.SelectParameters(0).DefaultValue = MODEL
    End If
End Sub

这个结果的aspx其实很一般，就是把QueryString带入WHERE的参数，然后将结果呈现在GridView里面。所以这边就不多加着墨。

suggestions.aspx

这个文件是视觉化搜寻最重要的文件，也就是当在搜寻按下关键字后，IE8会自动的透过OpenSearch.xml里面的设定，启动这个aspx，必透过searchTerms将输入的关键字透过QueryString传递给该程序。然后该程序将结果以XML的方式返回。我们就来看看这只程序的内容。

suggestions.aspx

<%@ Page ContentType="text/xml" Language="VB" AutoEventWireup="false" CodeFile="suggestions.aspx.vb" Inherits="suggestions" %>
<%@ OutputCache Location="None" %> 
 
    <%=Server.HtmlEncode(Request.QueryString("q"))%>  
    
 
        
        
    
 
 

小喵保持用CodeBehind的方式，由后端来处理这个文件。特别的地方是在Page的声明，多加了【ContentType="text/xml"】，因为这个文件输出不是一般默认的html，而是xml，而内容也是xml的样子。在画面中安排了个【Literal(L1)】，动态产生的xml内容就透过这个控制像来摆放在这里。

接着看一下suggestions.aspx.vb

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim x As String = ""
    Try
        Dim q As String = Request.QueryString("q")
        If q IsNot Nothing Then
            Dim SURL As String = "http://" + Request.ServerVariables("SERVER_NAME") + "/tVisualSearch/"
            Dim ConnStr As String = ConfigurationManager.ConnectionStrings("DatabaseConnectionString1").ConnectionString
            Using Conn As New SqlConnection(ConnStr)
                Dim SqlTxt As String = ""
                SqlTxt += "SELECT * FROM T1 WHERE MODEL LIKE @MODEL"
                Using cmmd As New SqlCommand(SqlTxt, Conn)
                    cmmd.Parameters.AddWithValue("@MODEL", q & "%")
                    Dim Da As New SqlDataAdapter(cmmd)
                    Dim Dt As New DataTable
                    Da.Fill(Dt)
                    If Dt.Rows.Count > 0 Then
                        Dim y As Integer
                        For y = 0 To Dt.Rows.Count - 1
                            x += "" + vbCrLf
                            x += "" + Dt.Rows(y).Item("MODEL") + "" + vbCrLf
                            x += "" + Dt.Rows(y).Item("Url") + "" + vbCrLf
                            x += "" + Server.HtmlEncode(Dt.Rows(y).Item("Description")) + "" + vbCrLf
                            x += " "
                            x += "" + vbCrLf
                        Next
                    End If
                End Using
            End Using
        End If
    Catch ex As Exception

    End Try


    Me.L1.Text = x
End Sub

这里透过ADO.NET，从数据库捞出数据，判断是否有QueryString，如果有就捞出数据后，组合xml的字符串，最后将组好的xml放到L1的位置。

这样好了后，测是一下这个suggestions.aspx?q=TH-6结果是

  TH-6
  

    
    
      TH-65PZ800T
      http://pmst.panasonic.com.tw/frontend/product/PSPCcontent.aspx?id=964
      Full HD面板(1920x1080) ● Full HD PEAKS高清系统搭载 ● 全新纯黑面版(MAX 30,000:1) ● NEW VIERA扬声系统&31W大出力 ● 声音AI&环场音效 ● 音量补正控制 ● VIERA Link
      
    
    
      TH-65PZ700T
      http://pmst.panasonic.com.tw/frontend/product/PSPCcontent.aspx?id=715
      Full HD 1920x1080面板 ●10000：1超高对比 ●搭载数位无线解码转换盒 ●HDMI可串连DVD与家庭剧院 ●BBE VIVA HD 3D音效 ●双画面显示 ●VIERA Link连结周边影音 ●SD读卡功能
      
    
  

这边说明一下，详细的格式各位可以参考这一篇【XML Search Suggestions Format Specification】，小喵在测试的过程中，一直有错误，直到看到这一篇的讲解，然后在加上【xmlns ="http://schemas.microsoft.com/Search/2008/suggestions"】才成功，所以大家如果对于格式有疑问，还是记得去这篇查询一下。

把Search Provider加到IE8

最后的步骤，就是要将您的Search Provider加到IE8中。住要是要让您的OpenSearch.xml能够注册到您的IE8，方式很简单，您只要随便找个网页(例如：Default.aspx)然后在里面加上以下这一段就可以啰

点这里，将Topcat Example Search加入IE8!! 

这里要注意路径，如果您的OpenSearch.xml与您这个的路径不同，记得要修正一下。

结语

以上就是如何让自己的网站可以支持【视觉化搜寻(Visual Search)】的方式。大家可以思考一下，您的Web应用程序中，是否有哪些地方可以让使用者这个功能，享受IE8带来的【视觉化搜寻】。

参考数据：

http://blogs.msdn.com/ie/archive/2008/09/18/hello-world-getting-started-with-ie8-visual-search.aspx

http://msdn.microsoft.com/en-us/library/cc848863.aspx

---

以下是签名：

• 欢迎转贴本站的文章，不过请在贴文主旨上加上【转贴】，并在文章中附上本篇的超链接与站名【topcat姗舞之间的极度凝聚】，感恩大家的配合。
• 小喵大部分的文章会以小喵熟悉的语言VB.NET撰写，如果您需要C#的Code，也许您可以试着用线上的工具进行转换，这里提供几个参考
  • http://converter.telerik.com/
  • http://www.carlosag.net/tools/codetranslator/
  • http://www.developerfusion.com/tools/convert/vb-to-csharp/

---

Visual Studio and Development Technologies (2005~Now)

topcat Blog:http://www.dotblogs.com.tw/topcat

原文:大专栏  [IE8]开发自己站台的视觉化搜寻(Visual Search)