[IE8] visual search)

Starting from

In the previous article [[Internet Explorer 8] [Introduction to the search engine function], Internet Explorer 8 has added the immersive search engine function. When I saw this function, I thought that web app developer xiaomiao could not help but think that if the system of xiaomiao can also provide this function to users, how nice it should be. As a result, Xiao meow began to search for information about such functions.

Let's take a look at the results.

Before explaining how to design, let's take a look at the results to be achieved during the transition period. For more information, see the following video.

Additional information

For such a feature, Xiao Miao first found this article [Hello, world: getting started with IE8 visual search]Article, It is found that he must generate some information, and need to have such information as text, URL, description, and images, therefore, Xiao meow created a weekly data table named T1, with some weekly data in it, the related information is as follows:

Opensearch. xml

To provide the search provider, you must upload an opensearch. the XML example is in your example, while others add your provider through this XML. So let's take a look at this opensearch. what is the content of XML?

 
<? XML version = "1.0" encoding = "UTF-8"?> <Opensearchdescription xmlns = "http://a9.com/-/spec/opensearch/1.1/"> <shortname> topcat example search </shortname> <URL type = "text/html" template = "http: // [Your IP or server name]/tvisualsearch/results. aspx? Q = {searchterms} "/> <URL type =" application/X-suggestions + XML "template =" http: // [Your IP or server name]/tvisualsearch/suggestions. aspx? Q = {searchterms} "/> <Image Height =" 16 "width =" 16 "type =" image/icon "> HTTP: // [Your IP or server name]/tvisualsearch/topcat. ICO </image> </opensearchdescription>
 

Replace [Your IP or server name] With your own server IP or server name. From the above case, we know that we need to write two programs

• Result. aspx
• Suggestions. aspx: the format used in this case is 【XML] Is the most important case for this graphic search.

In addition, the text in shortname will be the text not displayed in the search box, so you can try to find a super-powerful search engine in the universe and give it to him, take topcat example search ). Image is a ico attack case, that is, when searching, at the very beginning, you can also design a beautiful display here.

Next, let's take a look at how to create these two cases.

Result. aspx

In fact, when you press enter in the search area, you need to explain the search results. Therefore, Xiao meow uses the simplest method, the result of the search is displayed in a gridview. The related program is as follows:

Result. aspx

<Asp: gridview id = "gridview1" runat = "server" autogeneratecolumns = "false" datakeynames = "ID" performanceid = "sqlperformance1" emptydatatext = "No information is displayed. "Enableviewstate =" false "> <columns> <asp: boundfield datafield =" ID "headertext =" ID "readonly =" true "sortexpression =" ID "/> <asp: boundfield datafield = "model" headertext = "model" sortexpression = "model"/> <asp: boundfield datafield = "Description" headertext = "Description" sortexpression = "Description"/> <asp: hyperlinkfield datanavigateurlfields = "url" datatextfield = "url" headertext = "url"/> <asp: templatefield headertext = "IMG"> <edititemtemplate> <asp: textbox id = "textbox1" runat = "server" text = '<% # eval ("IMG") %> 'tooltip =' <% # eval ("IMG ") %> '> </ASP: textbox> </edititemtemplate> <itemtemplate> <asp: image id = "image1" runat = "server" imageurl = '<% # "images/" & eval ("IMG ") %> '/> </itemtemplate> </ASP: templatefield> </columns> </ASP: gridview> <asp: sqldatasource id = "sqldatasource1" runat = "server" connectionstring = "<% $ connectionstrings: databaseconnectionstring1 %>" providername = "<% $ connectionstrings: databaseconnectionstring1.providername %> "selectcommand =" select [ID], [model], [description], [img], [url] from [T1] Where ([model] Like @ Model) "> <selectparameters> <asp: parameter name =" model "type =" string "/> </selectparameters> </ASP: sqldatasource>

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 ifend sub
 

In fact, the aspx of this result is very general, that is, the querystring is taken into the where vertex number, and then the result is displayed in the gridview. So there is no more ink in this case.

Suggestions. aspx

This case is the most important case of Artificial Intelligence search, that is, IE8 will automatically penetrate opensearch after the search is completed. the settings in the XML file, when this aspx is triggered, it must be passed through {searchterms} to send the keyword entered through querystring to the program. Then the program will return the result in XML format. Let's take a look at the content of this program.

Suggestions. aspx

<% @ Page contenttype = "text/XML" Language = "VB" autoeventwireup = "false" codefile = "suggestions. aspx. VB "inherits =" Suggestions "%> <% @ outputcache location =" NONE "%> <? XML version = "1.0"?> <Searchsuggestion xmlns = "http://schemas.microsoft.com/Search/2008/suggestions"> <query> <% = server. htmlencode (request. querystring ("Q") %> </query> <section> <separator Title = "my visual suggestions"/> <asp: literal id = "L1" runat = "server"> </ASP: literal> </section> </searchsuggestion>
 

Tom kept using codebehind to handle the case later. Specifically, the announcement on the page adds [contenttype = "text/XML"], because in this case, HTML is not generally set, but XML, content is also like XML. A [literal (L1)] is arranged in the graphic, and the XML content generated by the dynamic production is stored here through this control image.

Next let's take a look at 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 N EW sqlconnection (connstr) dim sqltxt as string = "" sqltxt + = "select * from T1 where model like @ model" using cmd as new sqlcommand (sqltxt, Conn) cmd. 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 ("Mod El ") +" </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 = '000000' Height = '000000'/>" x + = "</item>" + vbcrlf next end if end using end if catch ex as exception end try me. l1.text = xend sub

This is transparent to ADO.. net. Determine whether querystring exists from the data source. If yes, combine the XML string after the data is generated, finally, place the XML in L1.

After this is done, is this suggestions. aspx? Q = the result of TH-6 is

<? XML version = "1.0"?> <Searchsuggestion xmlns = "http://schemas.microsoft.com/Search/2008/suggestions"> <query> TH-6 </query> <section> <separator Title = "my visual suggestions"/> <item> <text> TH-65PZ800T </Text> <URL> http://pmst.panasonic.com.tw/frontend/product/PSPCcontent.aspx? Id = 964 </URL> <description> Full HD Panel (1920x1080) ● Full HD peaks High Quality System ● brand new black panel (max 30,000: 1) ● New Viera Audio and Video System & Output ● audio and video AI & on-site sound effects ● normal volume control ● Viera link </description> <Image Source = "http: // localhost/tvisualsearch/images/TH-65PZ800T_S.jpg "alt =" TH-65PZ800T "width =" 100 "Height =" 100 "/> </item> <text> TH-65PZ700T </ text> <URL> http://pmst.panasonic.com.tw/frontend/product/PSPCcontent.aspx? Id = 715 </URL> <description> Full HD 1920x1080 panel ● ultra-high ratio ● provide unlimited solution to the camera box when using a digital device ● HDMI cable string between a DVD and a home Cable school ● bbe Viva HD 3D sound effects ● graphic presentation ● Viera Link Integrated Audio and Video ● SD audio card function </description> <Image Source = "http: // localhost/tvisualsearch/images/TH-65PZ700T_S.jpg "alt =" TH-65PZ700T "width =" 100 "Height =" 100 "/> </item> </section> </searchsuggestion>

 

 

 

 

In this example, you can refer to this article [XML search suggestions format specification]. During the course of this article, Xiao Meow has been using the syntax, until you see the solution of this article, and then in the <searchsuggestion> with [xmlns = "http://schemas.microsoft.com/Search/2008/suggestions"] is successful, so if you have doubts about the format, remember to check this article.

Add search provider to IE8

The last step is to add your search provider to IE8. If you want your opensearch. XML can be used to export data to your IE8. The method is very simple. You only need to find a website (for example: default. aspx) and then add the following section to it.

 
<A href = "javascript: window. External. addsearchprovider ('opensearch. xml')"> click here to add topcat example search to IE8 !! </A>
 

Note the path here. If your opensearch. XML is different from your path, remember to correct it.

Conclusion

The preceding figure shows how to enable your website to support [visualized search. You can think about where your web application can allow users to use this function and enjoy the [visualized search] Brought by Internet Explorer 8 ].

Additional information:

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