[IE8]開發自己站台的視覺化搜尋(Visual Search)

緣起

承繼上篇【[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的內容為何

其中在[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

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

小喵保持用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 += "<Item>" + vbCrLf x += "<Text>" + Dt.Rows(y).Item("MODEL") + "</Text>" + vbCrLf x += "<Url>" + Dt.Rows(y).Item("Url") + "</Url>" + vbCrLf x += "<Description>" + Server.HtmlEncode(Dt.Rows(y).Item("Description")) + "</Description>" + vbCrLf x += "<Image source='" + SURL + ResolveClientUrl("~/images/") + Dt.Rows(y).Item("Img") + "' alt='" + Dt.Rows(y).Item("MODEL") + "' width='100' height='100'/> " x += "</Item>" + 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結果是

 

 

 

 

這邊說明一下，詳細的格式各位可以參考這一篇【XML Search Suggestions Format Specification】，小喵在測試的過程中，一直有錯誤，直到看到這一篇的講解，然後在<SearchSuggestion>加上【xmlns ="http://schemas.microsoft.com/Search/2008/suggestions"】才成功，所以大家如果對於格式有疑問，還是記得去這篇查詢一下。

把Search Provider加到IE8

最後的步驟，就是要將您的Search Provider加到IE8中。住要是要讓您的OpenSearch.xml能夠註冊到您的IE8，方式很簡單，您只要隨便找個網頁(例如：Default.aspx)然後在裡面加上以下這一段就可以囉

這裡要注意路徑，如果您的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