[IE8]使用ASP開發自己月台的視覺化搜尋(Visual Search)

來源:互聯網
上載者:User
文章目錄
  • 測試用的資料庫
  • OpenSearch.XML
  • 搜尋結果的程式:Results.asp
  • 產生視覺化搜尋結果的程式:suggestion.asp
  • 加入視覺化搜尋
  • 結語
緣起

看到這篇標題的朋友,或許會覺得似曾相識。沒錯,承繼之前的【[IE8]搜尋功能介紹】與【[IE8]開發自己月台的視覺化搜尋(Visual Search)】之後,已經可以使用【ASP.NET】自己開發視覺化搜尋(Visual Search)了。不過小喵有一半以上的系統還是留在【ASP】的架構。這些舊系統在上位升級到ASP.NET之前,也希望能夠利用【ASP】開發出視覺化搜尋。所以這篇的重點是如何用【ASP】來開發視覺化的搜尋。

必要準備的項目

從上一篇【[IE8]開發自己月台的視覺化搜尋(Visual Search)】我們可以知道,我們想要開發視覺化搜尋,需要準備以下幾的東西

  • 1.測試用的資料庫:
  • 2.OpenSearch.XML:用來宣告搜尋的結果的頁面、視覺化搜尋建議的頁面、搜尋名稱等
  • 3.Result.asp:展示搜尋的結果
  • 4.Suggestion.asp:視覺化搜尋的精華!!能夠視覺化搜尋全靠這個產生動態xml結果
  • 5.安裝的按鈕:安裝寫好的搜尋
測試用的資料庫

這裡借用上一篇的資料庫來當作資料來源,相關的欄位請看以下這個圖片

OpenSearch.XML
<?xml version="1.0" encoding="utf-8" ?><OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">    <ShortName>Topcat ASP Example Search</ShortName>    <Url type="text/html" template="http://[ServerIP or ServerName]/[ProjectName]/results.asp?MODEL={searchTerms}" />    <Url type="application/x-suggestions+xml" template="http://[ServerIP or ServerName]/[ProjectName]/Suggestion.asp?MODEL={searchTerms}"/>    <Image height="16" width="16" type="image/icon">http://[ServerIP or ServerName]/[ProjectName]/TOPCAT.ico</Image></OpenSearchDescription>

在這個檔案中

  • [ServerIP Or ServerName]:這邊請置換成您自己的Server狀態
  • [ProjectName]:這邊請置換成您自己的專案名稱
  • SortName:安裝後,顯示的搜尋名稱
  • 第一個Url:搜尋結果的程式【Results.asp】,透過{searchTerns}傳入要搜尋的內容,她是一個網頁,所以type=”text/html”
  • 第二個Url:傳回視覺化搜尋【XML】結果的程式【Suggestion.asp】。
  • Img:設定搜尋的圖示。

搜尋結果的程式:Results.asp

接著來看一下搜尋結果的程式。其實這個是一般的網頁ASP,寫法沒什麼特別的。判斷傳入的MODEL,如果有傳入資料,從資料庫撈出來的結果Rs用Table展現在畫面上。

<%@ Language="VBScript" CodePage="65001"%><!--#include file="GetRs.asp"--><%     response.CharSet="utf-8"  '限制使用UNICODE顯示    MODEL = UCase(Request.QueryString("MODEL"))    If MODEL <> "" Then        SQLTXT = ""        SQLTXT = SQLTXT & " SELECT TOP 10 * "        SQLTXT = SQLTXT & " FROM T1 (NOLOCK) "        SQLTXT = SQLTXT & " WHERE MODEL LIKE '" & MODEL & "%' "                Set Rs = GetRs(SQLTXT)  '呼叫Include裡面的Function取回RecordSet    End If%><html><head>    <title></title></head><body>    <table border="1">        <tr>            <th>機種</th>            <th>圖形</th>            <th>超連結</th>            <th>說明</th>        </tr><%If MODEL <> "" Then    '如果有傳入    If Not (Rs.BOF AND Rs.EOF) Then        '如果撈得到資料        Rs.MoveFirst        For y2 = 1 to Rs.RecordCount            tMODEL=Rs.Fields("MODEL").Value            tImg=Rs.Fields("Img").Value            tUrl=Rs.Fields("Url").Value            tDescription=Rs.Fields("Description").Value%>        <tr>            <td><%=tMODEL%></td>            <td><img src="<%=tImg%>" alt="<%=tMODEL %>" /></td>            <td><a href="<%=tUrl%>" target="_blank">網址</a></td>            <td><%=tDescription%></td>        </tr><%                    Rs.MoveNext        Next    End IfEnd If%>    </table></body></html>
產生視覺化搜尋結果的程式:suggestion.asp

接著是本篇的重點,要使用視覺化搜尋,最重要的就是要產生xml,並且依照規定的格式(XML Search Suggestions Format Specification)來產生。詳細請看以下的範例:

<%@ Language="VBScript" CodePage="65001"%><!--#include file="GetRs.asp"--><%    MODEL = UCase(Request.QueryString("MODEL"))    '取得傳入的資料    If MODEL <> "" Then        SQLTXT = ""        SQLTXT = SQLTXT & " SELECT TOP 10 * "        SQLTXT = SQLTXT & " FROM T1 (NOLOCK) "        SQLTXT = SQLTXT & " WHERE MODEL LIKE '" & MODEL & "%' "                Response.ContentType="text/xml"    '指定回傳的型態是xml                Response.Write("<?xml version='1.0' ?>")        Response.Write("<SearchSuggestion xmlns='http://schemas.microsoft.com/Search/2008/suggestions'>")        Response.Write("  <Query>" & MODEL & "</Query>")        Response.Write("  <Section>")        Response.Write("    <Separator title='My Visual Suggestions' />")        Response.Write("")                Set Rs = GetRs(SQLTXT)        If Not (Rs.BOF AND Rs.EOF) Then            Rs.MoveFirst            For y = 1 to Rs.RecordCount                Response.Write("    <Item>")                Response.Write("      <Text>" & rs.Fields("MODEL").Value & "</Text>")                Response.Write("      <Url>" & rs.Fields("Url").Value & "</Url>")                Response.Write("      <Description>" & Server.HTMLEncode(rs.Fields("Description").Value) & "</Description>")                Response.Write("      <Image source='" & Rs.Fields("Img").Value & "' alt='" & rs.Fields("MODEL").Value & "' width='100' height='100' />")                Response.Write("    </Item>")                Rs.MoveNext            Next        End If        Response.Write("  </Section>")        Response.Write("</SearchSuggestion>")    End If%>

其實程式並不難,主要是要設定傳回的型態是xml【Response.ContentType="text/xml"】剩下來的就是把xml的內容Response.Write出去。

加入視覺化搜尋

最後,用一個html的按鈕來加入這個視覺化搜尋

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title></head><body>    <input id="Button1" type="button" value="加入ASP視覺化搜尋範例" onclick="window.external.AddSearchProvider('opensearch.xml')" /></body></html>
結語

視覺化的搜尋,最重要的是那個產生建議項目動態xml的suggestion.asp,只要知道依照規定的格式產生,並且指定他的格式,就不難了。經過這次改用【ASP】撰寫後。只要能夠產生建議項目的xml,其實無論是用asp.net,asp,php,jsp,…應該都不會很困難。小喵就提供範例到這篇。如果有問題歡迎留言討論。^_^

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.