Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Highlight search keyword on results page.

Posted on 2010-08-26
5
Medium Priority
?
534 Views
Last Modified: 2012-06-21
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
%>
0
Comment
Question by:swaggerking
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 2

Expert Comment

by:Remi Gelinas
ID: 33533425
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
 

Author Comment

by:swaggerking
ID: 33533913
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
 
LVL 18

Accepted Solution

by:
Rajar Ahmed earned 1000 total points
ID: 33534702
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
 

Author Closing Comment

by:swaggerking
ID: 33534934
Thanks. It worked, out of the box. I appreciate your help.
0
 
LVL 18

Expert Comment

by:Rajar Ahmed
ID: 33534968
Welcome . !
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question