Highlight search keyword on results page.

I'm working in classic asp with SQL DB and I'm doing a very simple keyword search on my site. How would I go about highlighting the keyword on the results page. I'm assuming I could us CLASS.


MY FORM PAGE
<form name="search" method="post" action="searchresults.asp">
<table width="100%" border="1">
<tr><td><div align="center">Search our FAQ's</div></td></tr>
<tr><td>Enter Search Term</td></tr>
<tr><td><input type="text" name="searchterm">
<input type="submit" name="Submit" value="Search">
</td></tr></table></form>


MY CLASS
span.keyword {
     background: yellow;
     font-style: bold;
}


MY RESULTS PAGE
<!--#include virtual="/Connections/string.asp" -->


<%
DIM strSearchterm
strSearchterm = Request.Form("searchterm")

IF strSearchterm <> "" THEN
DIM mySQL, objRS, rsDsearch_cmd, objRS_numRows

Set rsDsearch_cmd = Server.CreateObject ("ADODB.Command")
rsDsearch_cmd.ActiveConnection = MY_STRING
mySQL = "SELECT * FROM dbo.FAQs WHERE (QUESTIONS LIKE '%" & strSearchterm & "%') OR (ANSWERS LIKE '%" & strSearchterm & "%')"
rsDsearch_cmd.CommandText = mySQL
Set objRS = rsDsearch_cmd.Execute
objRS_numRows = 0

IF objRS.EOF THEN
Response.Write "Sorry, no records were found for that searchterm"
ELSE
%>

<table width="100%">
<tr><td>Question</td><td>Answer</td></tr>
<% DO WHILE NOT objRS.EOF %>
<tr><td><%=objRS("QUESTIONS")%></td><td><%=objRS("ANSWERS")%></td></tr>
<%
objRS.MoveNext
Loop

END IF
%>
</table>

<%
ELSE
' No searchterm submitted, display blank
END IF
%>
swaggerkingAsked:
Who is Participating?
 
Rajar AhmedConnect With a Mentor ConsultantCommented:
try replacing it . by making it case insensitive comparison  . Hope ur Queries and conxn attributes are working gud .

<%=Replace(objRS("ANSWER"),strSearchterm,"<span class=""keyword"">"&strSearchterm&"</span>",1,1,1)%>

<!--#include virtual="/Connections/string.asp" -->
<form name="search" method="post" action="highlight_search.asp">
<table width="100%" border="1">
<tr><td><div align="center">Search our FAQ's</div></td></tr>
<tr><td>Enter Search Term</td></tr>
<tr><td><input type="text" name="searchterm">
<input type="submit" name="Submit" value="Search">
</td></tr></table></form>
<style>
.keyword {
     background: yellow;
     font-style: bold;
}
</style>

MY RESULTS PAGE

<%
DIM strSearchterm
strSearchterm = Request.Form("searchterm")

IF strSearchterm <> "" THEN%>

<%
DIM mySQL, objRS, rsDsearch_cmd, objRS_numRows


mySQL = "SELECT * FROM dbo.FAQs WHERE (QUESTIONS LIKE '%" & strSearchterm & "%') OR (ANSWERS LIKE '%" & strSearchterm & "%')"

Set objRS = con.Execute(mySQL)
objRS_numRows = 0

IF objRS.EOF THEN
Response.Write "Sorry, no records were found for that searchterm"
ELSE
%>

<table width="100%">
<tr><td>Question</td><td>Answer</td></tr>
<% DO WHILE NOT objRS.EOF %>
<tr><td><%=Replace(objRS("ANSWER"),strSearchterm,"<span class=""keyword"">"&strSearchterm&"</span>",1,1,1)%></td>
<%
objRS.MoveNext
Loop

END IF
%>
</table>

<%
ELSE
' No searchterm submitted, display blank
END IF
%>

Open in new window

0
 
Remi GelinasDeveloppeurCommented:
Hi,

If you want to highlight the word in the search page result, your class is a good way.
You can just use
Replace(objRS("ANSWERS"), strSearchterm, "<span class=keyword>" & strSearchterm & "<span>"

If you want to highlight the words inside a page that the user browse into from the search result (assuming your search result are page the user can browse into), you should use some javascript. Look at this site:
http://www.nsftools.com/misc/SearchAndHighlight.htm

<script language=JavaScript>
/*
 * This is the function that actually highlights a text string by
 * adding HTML tags before and after all occurrences of the search
 * term. You can pass your own tags if you'd like, or if the
 * highlightStartTag or highlightEndTag parameters are omitted or
 * are empty strings then the default <font> tags will be used.
 */
function doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag)
{
  // the highlightStartTag and highlightEndTag parameters are optional
  if ((!highlightStartTag) || (!highlightEndTag)) {
    highlightStartTag = "<font style='color:blue; background-color:yellow;'>";
    highlightEndTag = "</font>";
  }
 
  // find all occurences of the search term in the given text,
  // and add some "highlight" tags to them (we're not using a
  // regular expression search, because we want to filter out
  // matches that occur within HTML tags and script blocks, so
  // we have to do a little extra validation)
  var newText = "";
  var i = -1;
  var lcSearchTerm = searchTerm.toLowerCase();
  var lcBodyText = bodyText.toLowerCase();
   
  while (bodyText.length > 0) {
    i = lcBodyText.indexOf(lcSearchTerm, i+1);
    if (i < 0) {
      newText += bodyText;
      bodyText = "";
    } else {
      // skip anything inside an HTML tag
      if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) {
        // skip anything inside a <script> block
        if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i)) {
          newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;
          bodyText = bodyText.substr(i + searchTerm.length);
          lcBodyText = bodyText.toLowerCase();
          i = -1;
        }
      }
    }
  }
 
  return newText;
}


/*
 * This is sort of a wrapper function to the doHighlight function.
 * It takes the searchText that you pass, optionally splits it into
 * separate words, and transforms the text on the current web page.
 * Only the "searchText" parameter is required; all other parameters
 * are optional and can be omitted.
 */
function highlightSearchTerms(searchText, treatAsPhrase, warnOnFailure, highlightStartTag, highlightEndTag)
{
  // if the treatAsPhrase parameter is true, then we should search for
  // the entire phrase that was entered; otherwise, we will split the
  // search string so that each word is searched for and highlighted
  // individually
  if (treatAsPhrase) {
    searchArray = [searchText];
  } else {
    searchArray = searchText.split(" ");
  }
 
  if (!document.body || typeof(document.body.innerHTML) == "undefined") {
    if (warnOnFailure) {
      alert("Sorry, for some reason the text of this page is unavailable. Searching will not work.");
    }
    return false;
  }
 
  var bodyText = document.body.innerHTML;
  for (var i = 0; i < searchArray.length; i++) {
    bodyText = doHighlight(bodyText, searchArray[i], highlightStartTag, highlightEndTag);
  }
 
  document.body.innerHTML = bodyText;
  return true;
}


/*
 * This displays a dialog box that allows a user to enter their own
 * search terms to highlight on the page, and then passes the search
 * text or phrase to the highlightSearchTerms function. All parameters
 * are optional.
 */
function searchPrompt(defaultText, treatAsPhrase, textColor, bgColor)
{
  // This function prompts the user for any words that should
  // be highlighted on this web page
  if (!defaultText) {
    defaultText = "";
  }
 
  // we can optionally use our own highlight tag values
  if ((!textColor) || (!bgColor)) {
    highlightStartTag = "";
    highlightEndTag = "";
  } else {
    highlightStartTag = "<font style='color:" + textColor + "; background-color:" + bgColor + ";'>";
    highlightEndTag = "</font>";
  }
 
  if (treatAsPhrase) {
    promptText = "Please enter the phrase you'd like to search for:";
  } else {
    promptText = "Please enter the words you'd like to search for, separated by spaces:";
  }
 
  searchText = prompt(promptText, defaultText);

  if (!searchText)  {
    alert("No search terms were entered. Exiting function.");
    return false;
  }
 
  return highlightSearchTerms(searchText, treatAsPhrase, true, highlightStartTag, highlightEndTag);
}


/*
 * This function takes a referer/referrer string and parses it
 * to determine if it contains any search terms. If it does, the
 * search terms are passed to the highlightSearchTerms function
 * so they can be highlighted on the current page.
 */
function highlightGoogleSearchTerms(referrer)
{
  // This function has only been very lightly tested against
  // typical Google search URLs. If you wanted the Google search
  // terms to be automatically highlighted on a page, you could
  // call the function in the onload event of your <body> tag,
  // like this:
  //   <body onload='highlightGoogleSearchTerms(document.referrer);'>
 
  //var referrer = document.referrer;
  if (!referrer) {
    return false;
  }
 
  var queryPrefix = "q=";
  var startPos = referrer.toLowerCase().indexOf(queryPrefix);
  if ((startPos < 0) || (startPos + queryPrefix.length == referrer.length)) {
    return false;
  }
 
  var endPos = referrer.indexOf("&", startPos);
  if (endPos < 0) {
    endPos = referrer.length;
  }
 
  var queryString = referrer.substring(startPos + queryPrefix.length, endPos);
  // fix the space characters
  queryString = queryString.replace(/%20/gi, " ");
  queryString = queryString.replace(/\+/gi, " ");
  // remove the quotes (if you're really creative, you could search for the
  // terms within the quotes as phrases, and everything else as single terms)
  queryString = queryString.replace(/%22/gi, "");
  queryString = queryString.replace(/\"/gi, "");
 
  return highlightSearchTerms(queryString, false);
}


/*
 * This function is just an easy way to test the highlightGoogleSearchTerms
 * function.
 */
function testHighlightGoogleSearchTerms()
{
  var referrerString = "http://www.google.com/search?q=javascript%20highlight&start=0";
  referrerString = prompt("Test the following referrer string:", referrerString);
  return highlightGoogleSearchTerms(referrerString);
}

</script>

Bye
0
 
swaggerkingAuthor Commented:
For the first solution how would I implement it with what I have? Something not clicking on my end.

Replace(objRS("ANSWERS"), strSearchterm, "<span class=keyword>" & strSearchterm & "<span>"
0
 
swaggerkingAuthor Commented:
Thanks. It worked, out of the box. I appreciate your help.
0
 
Rajar AhmedConsultantCommented:
Welcome . !
0
All Courses

From novice to tech pro — start learning today.