UD40 Ultradev Tutorials
Home

Tutorials

Search

Links

Credits

Feedback
Home | Search | Back
Tutorial 3 - Highlight searched word

As a start, let's build a page to pass a form variable to our recordset. We will create a form field and name it as Keyword:

<form name="form1" method="post" action="searchresult.asp">
   <input type="text" name="Keyword">
</form>

Now at the page where the form variable is being passed to (searchresult.asp), set up a recordset that is filtered by the variable Keyword. The SQL statement should look like this:



We are using the value from the form field Keyword to filter our recordset. As I want to compare the search term against both my tutorial titles and another column called "Keywords", I added an OR statement in the SQL. The use of wildcard % requires that we use the LIKE operation and not = in the WHERE clause. Another thing of note is, since we are passing text strings, varSearch in the SQL statement is enclosed within a pair of single quotes (' ').

Now for the highlighting part. Let's say I want to list out all my the titles of my tutorials that match the search term. I would want to make bold the search term whenever it is encountered in the tutorial title in the database data. For a simple solution we can use:

<%=Replace((rsRecordsetName.Fields.Item("Title").Value), Request.Form("Keyword"), "<b>" & RequestForm("Keyword") & "</b>")%>

Study the code carefully. It specifies that the word from our form field Keyword is to be replaced by a bold version of itself, and at the place where we display the result from our recordset, in this case the tutorial titles.

Note that the code above displays the search term in bold only if the case (capital and small letters) of the result is an exact match with the search keyword used.


Non case-sensitive highlighting

For a more robust solution, in which the search term will be highlighted regardless of the case, we need to use a Function. Copy and paste the following code to the top of your search result page:



The two things that we need to pass into the function are str (the text that contains the word to replace) and word (the word to replace).

So, the next and final step would be to define str as the value from our recordset, and word as the input from our search form, then call the function to do the replace. Place the code below on your page at the spot where you want the search results to appear:


Demo | Back



Copyright © 2001, Swee Hoe Ong
All rights reserved.