You don't need IIS to create a decent interactive search engine. This example uses the tabular data control (only supported in IE4, comes with the IE4 install). Add ASP to this and make it more powerful.
Technologies Used:
- VBScript
- DHTML
- The Tabular Data Control
- ASP Optional
Tabular Data Control (TDC)
This neat little control allows you to bind data to html objects on a web page. This allows the developer and designer to separate their code and let each one focus on what they do best. In this example the data is bound to the table in the page. Before we get started on the good stuff we need to define a datasource for our bound table.
The DataSource
In this example I use a basic text file with the fields delimited by the pipe "|" character. I find using the pipe is much better than most characters. With this control however you can use any character you wish to separate your fields. Below you can see the datasource, consists of the field names at the top and the actual data on each line separated by the "|".
ID|Name|Category|URL|Description
1|SiteBuilder|ASP - Links|http://www.microsoft.com/sitebuilder|Description text
2|Support|ASP - Links|http://www.microsoft.com/support|Description text
3|MSDN Online|ASP - Links|http://www.microsoft.com/msdn|Description text
4|MIND|ASP - Links|http://www.microsoft.com/mind|Description text |
The datasource file - data.txt
This file could easily be an ASP file, instead of parsing out html tables from your recordset just create a file like above instead. This way you can incorporate an initial search and then allow further filtering and sorting via DHTML. So instead of defining data.txt as your datasource for the TDC you would put data.asp (example below).
Create the Connection to the TDC
Now that you have your datasource file, post it on the server and then in your html document, set the datasource of your TDC to this file:
<object id="elements" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param NAME="DataURL" VALUE="data.txt">
<param NAME="UseHeader" VALUE="True">
<param NAME="FieldDelim" VALUE="|">
<param NAME="Filter" Value="ID=0">
</object>
The reference to the TDC. MyDoc.html
You can see that we are passing the name of the datasource, the headers, and field delimiters that are used. The filter parameter is used for my purposes so when the user first hits the page no data is displayed. Being that none of the records have an ID of 0, none will be displayed. If this was not applied all the data from the file would be displayed.
Bind it to the Table
Now that I have the connection I need to bind the data to my table. All I have to do is add a few additional tags to the table.
<table datasrc="#elements" Width="100%" Cellpadding="0" cellspacing="0">
<thead>
<tr STYLE="font-weight:bold" bgcolor="silver">
<td nowrap ID="TD-Name" align="center"><div ID="Name" Class="TDHdr">Name </div></td>
<td nowrap ID="TD-Category" align="center"><div ID="Category" Class="TDHdr">Category </div></td>
<td nowrap ID="TD-Description" align="center"><div ID="Description" Class="TDHdr">Description </div></td>
</tr>
</thead>
<tbody>
<tr valign="top">
<td class="tdFFL"><a datafld="URL"><div datafld="Name"></div></a></td>
<td class="tdFF"><div datafld="Category"></div></td>
<td class="tdFF"><div datafld="Description"></div></td>
</tr>
</tbody>
</table>
Binding the table to the data.txt file
In the table tag, I created a reference to the TDC. Here I specified my datasource to be elements the name of my TDC. Then I added the <thead> tag to specify that this is a header, then standard html table tags are added. The class ids are added for formatting and latter manipulation of the data in my VBScript code. After this is the <tbody> tag. This lets the browser know that there is data to displayed. In each table cell I add a division tag, this tag is then the tag that is going to receive my data. I bind to it by calling it a data field with the following tag: datafld="Category", as you can see from the above text file where the Category field is defined. Then I have description defined and that takes care of the fields I wish to display.
Now I have all my fields defined and bound to my table that's all I need to do to display my table. I did in my object tag above (The reference to the TDC. MyDoc.html) create a filter saying ID=0. Because of this filter no records will be displayed when the user first hits the page. Because I have no records with the ID of 0. If I did not pass any values to the filter all the records would be displayed and my table would be displayed in the table format that I defined in my table code above.
The reason I applied the filter is so I can create the cool filtering and searching routine for my website. This is what allows me to later capture the selection and mouse click on the column to do the sorting.
Creating my Select Filter
I use the following html to create the select box in order to filter and search the data.
<table>
<tr>
<td class="tdFF">Category:
</td>
<td class="tdFF"><select name="cboCategory" Class="Filters">
<option value="All">All</option>
<option value="ASP - Freebees">ASP - Freebees</option>
<option value="ASP - Tools">ASP - Tools</option>
<option value="ASP - Links">ASP - Links</option>
<option value="ASP - Misc">ASP - Misc</option>
<option value="DHTML - Freebees">DHTML - Freebees</option>
<option value="DHTML - Links">DHTML - Links</option>
</select>
</td>
</tr>
</table>
At the top of the page I define my elements using style sheets. I recommend using style sheets, it saves loads of time if you ever want to change your page elements. You can see how applied the styles to the different elements as in the border for my select box and the table itself to give it the grid appearance that it has.
Amoung the functions are procedures just to handle the display of the column headers when the mouse passes over and clicks on it. In the document onClick, onMouseover and onMouseout event I call functions to handle the style change to give the 3D button appearance to the headers. Also in the Document_onClick you'll notice some methods that I call. These additional methods handle the data and sorting of it. Being that I grabbed the the mouse click and I know the ID of the element that the user clicked on by using the code in the folowing example:
set srcElement = window.event.srcElement
I can now sort by this ID of the element. I set a sort flag so I know the last sort order and then use the sort method of the TDC:
elements.Sort = SortFlag & srcElement.ID
Then just reset the control. Simular to doing a refresh in VB. And that's all there is to it for creating a sort on a bound element. Easy stuff, right?
The Searching
The searching is about as easy as the sorting. Below you'll see the onChange event for my select box. Once the user changes this value, this event is going to be triggered. Then I grab the new value:
cFilterExpr = "Category = " & Chr(34) & MyForm.cboCategory.value & Chr(34)
and call the filter method:
elements.object.filter = cFilterExpr
of the TDC and reset it.
elements.Reset
<style>
.tdFF {
font-family: Arial; font-size: 9pt;text-decoration:none;
height:17;border-width:1px;border-style:solid;}
.tdFFL {
font-family: Arial; font-size: 9pt;height:17;
border-width:1px;border-style:solid;}
.TDHdr {
font-family: Arial;font-size: 10pt;cursor: default;
background:#C0C0C0;border-width:1px;border-style:solid;
border-top-color:silver;border-left-color:silver;
border-bottom-color:silver;border-right-color:silver;}
.TDFoot {
font-family: Arial;font-size: 10pt;cursor: default;
background: #C0C0C0;border-width:1px;border-style:solid;
border-top-color:white;border-left-color:white;
border-bottom-color:gray;border-right-color:gray;}
.Filters {
font-family: Arial; font-size: 9pt;height:17;
width:150;border-width:1px;border-style:solid;}
.txtFilters {
font-family: Arial; font-size: 9pt;
height:17;width:63;border-width:1px;border-style:solid;}
</style>
<script language="VBScript">
Dim SortFlag, FieldFocus, FilterString, cFilterExpr
Sub Document_OnClick()
set srcElement = window.event.srcElement
If srcElement.className = "TDHdr" Then
If SortFlag = "+" Then
SortFlag = "-"
Else
SortFlag = "+"
End If
elements.Sort = SortFlag & srcElement.ID
elements.Reset
End If
End Sub
Sub document_onmouseover()
set srcElement = window.event.srcElement
Select Case srcElement.className
Case "TDHdr"
Call MakeOut(srcElement)
Case "tdFFL"
srcElement.style.color="red"
End Select
End Sub
'==============================
Sub document_onmouseout()
set srcElement = window.event.srcElement
Select Case srcElement.className
Case "TDHdr"
Call MakeNormal(srcElement)
Case "tdFFL"
srcElement.style.color="black"
End Select
End Sub
'==============================
Sub Document_OnMouseUp()
set srcElement = window.event.srcElement
Select Case srcElement.ClassName
Case "TDHdr"
Call MakeOut(srcElement)
End Select
End Sub
Sub Document_OnMouseDown()
set srcElement = window.event.srcElement
Select Case srcElement.ClassName
Case "TDHdr"
Call MakeIN(srcElement)
End Select
End Sub
Sub Window_Onload()
MyForm.cboCategory.value = "None Selected"
End Sub
Sub MakeOut(srcElement)
srcElement.style.cursor = "default"
srcElement.style.borderStyle = "solid"
srcElement.style.borderWidth = "1"
srcElement.style.borderTopColor = "white"
srcElement.style.borderLeftColor = "white"
srcElement.style.borderBottomColor = "gray"
srcElement.style.borderRightColor = "gray"
End Sub
Sub MakeIn(srcElement)
srcElement.style.cursor = "default"
srcElement.style.borderStyle = "solid"
srcElement.style.borderWidth = "1"
srcElement.style.borderTopColor = "gray"
srcElement.style.borderLeftColor = "gray"
srcElement.style.borderBottomColor = "white"
srcElement.style.borderRightColor = "white"
End Sub
Sub MakeNormal(srcElement)
srcElement.style.borderStyle = "solid"
srcElement.style.borderWidth = "1"
srcElement.style.borderTopColor = "silver"
srcElement.style.borderLeftColor = "silver"
srcElement.style.borderBottomColor = "silver"
srcElement.style.borderRightColor = "silver"
End Sub
Sub cboCategory_OnChange()
Call FilterGroupAndPeriod
End Sub
function FilterGroupAndPeriod()
cFilterExpr = ""
if MyForm.cboCategory.value <> "All" then
cFilterExpr = "Category = " & Chr(34) & MyForm.cboCategory.value & Chr(34)
end if
elements.object.filter = cFilterExpr
elements.Reset
end function
</script>
</head>
