Avatar of Wirt
Wirt
Flag for United States of America asked on

Style selected text on search results

looking for a way to style the text the user searches for.

example: User submits a search for a "ABC" I want to style all the "ABC"s on the results data set.

Web Languages and StandardsJScript

Avatar of undefined
Last Comment
Wirt

8/22/2022 - Mon
mltsy

Can you provide a link to an example of a search page you're trying to style?  What kind of server side language are you using?  or what search technology?  Can you give more details about how your search works?
Wirt

ASKER
I wish, but  its no a a corp intranet. The server side is coldfuision and I'm simply submiting a form and using the form vars to drive a  query.
I think use <cfoutput  query="q"> to create my display of the results
Ive attached a piece of the results page

<cfif isDefined("search") or isDefined("loadAgain") OR #quickSearch# Eq 1>
	<!--- Directing user edit page if Project exists--->
	 <cfif '#form.actId#' NEQ '' AND '#form.actId#' NEQ 'ALL' AND '#form.actId#' NEQ 'None'>
	    <!--- Looking Up project Id--->
		<cfquery name="doesProjectIdExist" datasource="#dbname#" username="#dbuser#" password="#dbpw#">
	  	Select distinct(PROJECT_ACTIVITY.PROJECT_ID)
		FROM #dbJoinTab#		
		WHERE PROJECT_ACTIVITY.PROJECT_ID = #form.actId#
		<cfif '#getcurrUser.user_role#' EQ 'DIR'>
		AND DIR = '#getcurrUser.PMT_USER_ID#'
		<cfelseif '#getcurrUser.user_role#' EQ 'ADSS' or  '#getcurrUser.user_role#' EQ 'ADSS'>
		AND (ADSS = '#getcurrUser.PMT_USER_ID#' OR ADSS_2= '#getcurrUser.PMT_USER_ID#') 
		<cfelseif '#getcurrUser.user_role#' EQ 'CSS'>
		AND (   TAB_OWNER = '#getcurrUser.PMT_USER_ID#'
				OR REMOTE_OWNER = '#getcurrUser.PMT_USER_ID#'
				OR PMT_USERS.pmt_usr_bk_id1 =  '#getcurrUser.PMT_USER_ID#'
		 		OR	PMT_USERS.pmt_usr_bk_id2 = '#getcurrUser.PMT_USER_ID#'
		 		OR	PMT_USERS.pmt_usr_bk_id3 = '#getcurrUser.PMT_USER_ID#' )
		</cfif>
	    </cfquery>
		<!--- Sendin to edit page --->
		<CFIF #doesProjectIdExist.recordCount# GTE 1>
	   		<cflocation url="editProject.cfm?projectID=#form.actId#">
		</CFIF>
	  </CFIF>
	  
	<!--- Used to reload the form--->
	<input type="hidden" name="loadAgain" value="1">
	
	<!--- Search Q--->
	<cfquery name="search_query" datasource="#dbname#" username="#dbuser#" password="#dbpw#">
	 SELECT 
				Project_activity.PROJECT_ID AS ID,
				PMT_TABS.TAB_NAME,
				PMT_TABS.TAB_ID,
				PROJECT_DESC,
				TAB_RECD_DT,
				TAB_TYPE AS TYPE,
				TAB_SOURCE AS SOURCE,
				PMT_USER_ID AS Creator, 
				REMOTE_OWNER AS Remote,
				eCRM_OPTY_ID AS Opty_ID, 
				eCRM_WRID AS WORK_ID, 
				eCRM_SRID_ID AS SRID_ID, 
				RESP_ID AS RESP_ID,
				RDS AS RDS, 
				SMART_ID AS SMART_ID,
				BELLSOUTH_PKG_ID AS BS_PKG_ID,
				IOM AS IOM,
				EMQDS AS EMQDS,
				EMACD AS EMACD,
				HOT_CUSTOMER AS HOT_OR_NOT,
				OVERALL_STATUS AS OVERALL,
				OWNER_STATUS AS PRES,
				REMOTE_STATUS AS REMOTE,
				PROJECT_DESC , 
				CUST_NAME AS CUST_NAME, 
				CUSTOMER_LOCATION AS STATE, 
				SALES_SCVP AS SCVP, 
				SALES_RVP AS RVP,
				SALES_CONTACT AS CONTACT,
				AGID AS AGID,
				PID AS PID,
				CUST_SEGMENT AS SEGMENT
								
	FROM #dbJoinTab#
	left outer join PMT_TRACKING
	on PMT_TRACKING.TAB_ID = PMT_TABS.TAB_ID	
	WHERE 1 = 1
 
<cfif quickSearch EQ 1>
<!--- Quick search--->
	AND (TAB_OWNER = '#qsUUID#' OR REMOTE_OWNER = '#qsUUID#')
	AND (
	CUST_NAME like '%#TRIM(qsVar)#%' OR 
	Project_activity.PROJECT_ID like '%#TRIM(qsVar)#%' OR 
	RDS like '%#TRIM(qsVar)#%' OR 
	RESP_ID like '%#TRIM(qsVar)#%' OR 
	eCRM_OPTY_ID like '%#TRIM(qsVar)#%' OR 
	eCRM_WRID like '%#TRIM(qsVar)#%' OR  
	eCRM_SRID_ID like '%#TRIM(qsVar)#%' OR 
	SMART_ID like '%#TRIM(qsVar)#%' OR 
	BELLSOUTH_PKG_ID like '%#TRIM(qsVar)#%' OR 
	IOM like '%#TRIM(qsVar)#%' OR 
	EMQDS like '%#TRIM(qsVar)#%' OR 
	EMACD like '%#TRIM(qsVar)#%' OR 
	SALES_CONTACT like '%#TRIM(qsVar)#%' OR 
	AGID like '%#TRIM(qsVar)#%' OR 
	PID like '%#TRIM(qsVar)#%' OR 
	CUST_SEGMENT like '%#TRIM(qsVar)#%' OR 
	SALES_SCVP like '%#TRIM(qsVar)#%' OR 
	OVERALL_STATUS like '%#TRIM(qsVar)#%' OR 
	OWNER_STATUS like '%#TRIM(qsVar)#%' OR 
	TAB_NAME like '%#TRIM(qsVar)#%' OR 
	PROJECT_DESC like '%#TRIM(qsVar)#%'
	)
<cfelse>	
<!--- form search  --->
	<!---Owner / BackUp --->
	<cfif '#form.backUpId#' NEQ '' AND '#form.backUpId#' NEQ 'ALL' AND '#form.backUpId#' NEQ 'None'>
	AND PMT_USERS.PMT_USER_ID = '#TRIM(form.backUpId)#'
	AND (PMT_USERS.pmt_usr_bk_id1 =  '#getcurrUser.PMT_USER_ID#'
		 OR	PMT_USERS.pmt_usr_bk_id2 = '#getcurrUser.PMT_USER_ID#'
		 OR	PMT_USERS.pmt_usr_bk_id3 = '#getcurrUser.PMT_USER_ID#' )
	<cfelseif '#form.UUID#' NEQ 'ALL' AND '#form.UUID#' NEQ ''>
		<cfif #trim(#getcurrUser.user_role#)# EQ 'VP'>
			AND (TAB_OWNER = '#form.UUID#'
				OR REMOTE_OWNER = '#form.UUID#')
		<cfelse>
			AND TAB_OWNER = '#form.UUID#'
		</cfif>
     </cfif>
	 <!--- Date --->
	<cfif '#form.dt1#' NEQ '' AND '#form.dt2#' NEQ '' >
	AND	TAB_RECD_DT >= '#form.dt1#'
	AND TAB_RECD_DT <= '#form.dt2#'
	</cfif>	 
	<!--- Adss --->  
	<cfif '#getcurrUser.user_role#' EQ 'ADSS' or  '#getcurrUser.user_role#' EQ 'ADSS'>
	AND (ADSS = '#getcurrUser.PMT_USER_ID#' OR ADSS_2= '#getcurrUser.PMT_USER_ID#') 
	</cfif>
	<!--- Dir ---> 
	<cfif '#getcurrUser.user_role#' EQ 'DIR'>
	AND DIR = '#getcurrUser.PMT_USER_ID#'
	</cfif>	
	<!--- Type --->
	<cfif '#form.actType#' NEQ '0' AND '#form.actType#' NEQ 'ALL' AND '#form.actType#' NEQ 'None'>
	AND TAB_TYPE = '#form.actType#'
	</cfif>
	
	<!--- Source --->
	<cfif '#form.actSource#' NEQ '' AND '#form.actSource#' NEQ 'ALL' AND '#form.actSource#' NEQ 'None'>
	AND TAB_SOURCE = '#TRIM(form.actSource)#'
	</cfif>
	<!--- Customer --->
	<cfif '#form.custName#' NEQ ''  AND '#form.custName#' NEQ 'ALL' AND '#form.custName#' NEQ 'None'>
	AND CUST_NAME like '%#TRIM(form.custName)#%'
	</cfif>
	<!--- Project Id --->
	<cfif '#form.actId#' NEQ '' AND '#form.actId#' NEQ 'ALL' AND '#form.actId#' NEQ 'None'>
		AND Project_activity.PROJECT_ID like '%#TRIM(form.actId)#%'
	</cfif>
	<!--- Rds --->
	<cfif '#form.RDS#' NEQ '' AND '#form.RDS#' NEQ 'ALL' AND '#form.RDS#' NEQ 'None'>
	AND RDS like '%#TRIM(form.RDS)#%'
	</cfif>
	<!--- Resp Id --->
	<cfif '#form.respId#' NEQ '' AND '#form.respId#' NEQ 'ALL' AND '#form.respId#' NEQ 'None'>
	AND RESP_ID like '%#TRIM(form.respId)#%'
	</cfif>
	<!--- Opty Id --->
	<cfif '#form.ecrmOptyId#' NEQ '' AND '#form.ecrmOptyId#' NEQ 'ALL' AND '#form.ecrmOptyId#' NEQ 'None'>
	AND eCRM_OPTY_ID like '%#TRIM(form.ecrmOptyId)#%'
	</cfif>
	<!--- Wrk Id --->
	<cfif '#form.ecrmWrkId#' NEQ '' AND '#form.ecrmWrkId#' NEQ 'ALL' AND '#form.ecrmWrkId#' NEQ 'None'>
	AND eCRM_WRID like '%#TRIM(form.ecrmWrkId)#%'
	</cfif>
	<!--- sRid Id --->
	<cfif '#form.ecrmSRIDId#' NEQ '' AND  '#form.ecrmSRIDId#' NEQ 'ALL' AND '#form.ecrmSRIDId#' NEQ 'None'>
	AND eCRM_SRID_ID like '%#TRIM(form.ecrmSRIDId)#%'
	</cfif>
	<!--- Smart --->
	<cfif '#form.smartId#' NEQ '' AND '#form.smartId#' NEQ 'ALL' AND '#form.smartId#' NEQ 'None'>
	AND SMART_ID like '%#TRIM(form.smartId)#%'
	</cfif>
	<!--- bs works --->
	<cfif '#form.bsPkgId#' NEQ '' AND '#form.bsPkgId#' NEQ 'ALL' AND '#form.bsPkgId#' NEQ 'None'>
	AND BELLSOUTH_PKG_ID like '%#TRIM(form.bsPkgId)#%'
	</cfif>
	<!--- iom --->
	<cfif '#form.iomId#' NEQ '' AND '#form.iomId#' NEQ 'ALL' AND '#form.iomId#' NEQ 'None'>
	AND IOM like '%#TRIM(form.iomId)#%'
	</cfif>
	<!--- emqds --->
	<cfif '#form.emqdsId#' NEQ '' AND '#form.emqdsId#' NEQ 'ALL' AND '#form.emqdsId#' NEQ 'None'>
	AND EMQDS like '%#TRIM(form.emqdsId)#%'
	</cfif>
	<!--- emacd --->
	<cfif '#form.emacdId#' NEQ '' AND '#form.emacdId#' NEQ 'ALL'  AND '#form.emacdId#' NEQ 'None'>
	AND EMACD like '%#TRIM(form.emacdId)#%'
	</cfif>
	<!--- AE --->
	<cfif '#form.salesContacts#' NEQ '' AND '#form.salesContacts#' NEQ 'ALL' AND '#form.salesContacts#' NEQ 'None'> 
	AND SALES_CONTACT like '%#TRIM(form.salesContacts)#%'
	</cfif>
	<!--- AGID --->
	<cfif '#form.agid#' NEQ '' AND '#form.agid#' NEQ 'ALL' AND '#form.agid#' NEQ 'None'>
	AND AGID like '%#TRIM(form.agid)#%'
	</cfif> 
	<!--- PID  --->
	<cfif '#form.pid#' NEQ '' AND '#form.pid#' NEQ 'ALL' AND '#form.pid#' NEQ 'None'>
	AND PID like '%#TRIM(form.pid)#%'
	</cfif> 
	<!--- Hot or Not --->
	<cfif '#form.hotOrNot#' NEQ '' AND '#form.hotOrNot#' NEQ 'ALL' AND '#form.hotOrNot#' NEQ 'None'>
	AND HOT_CUSTOMER = '#TRIM(form.hotOrNot)#'
	</cfif>
	<!--- State --->
	<cfif '#form.state#' NEQ '' AND '#form.state#' NEQ 'ALL' AND '#form.state#' NEQ 'None'>
	AND CUSTOMER_LOCATION like '%#TRIM(form.state)#%'
	</cfif>
	<!--- Seg --->
	<cfif '#form.custSegment#' NEQ '' AND '#form.custSegment#' NEQ 'ALL' AND '#form.custSegment#' NEQ 'None'>
	AND CUST_SEGMENT like '%#TRIM(form.custSegment)#%'
	</cfif>
	<!--- SCVP --->
	<cfif '#form.salesSCVP#' NEQ '' AND '#form.salesSCVP#' NEQ 'ALL'>
	AND SALES_SCVP = '#TRIM(form.salesSCVP)#'
	</cfif>	
	<!--- Overall Status --->
	<cfif '#form.overAllStatus#' NEQ '' AND '#form.overAllStatus#' NEQ 'ALL'>
	AND OVERALL_STATUS = '#TRIM(form.overAllStatus)#'
	</cfif>
	<!--- Owner --->
	<cfif '#form.ownerStatus#' NEQ '' AND '#form.ownerStatus#' NEQ 'ALL'>
	AND OWNER_STATUS = '#TRIM(form.ownerStatus)#'
	</cfif>
	<!--- Remote --->
	<cfif '#form.remoteStatus#' NEQ '' AND '#form.remoteStatus#' NEQ 'ALL'>
	AND REMOTE_STATUS = '#TRIM(form.remoteStatus)#'
	</cfif>	
	<!--- Tab Name --->
	<cfif '#form.tabName#' NEQ '' AND '#form.tabName#' NEQ 'ALL'>
	AND TAB_NAME = '#TRIM(form.tabName)#'
	</cfif>	
	<!--- Project Name --->
	<cfif '#form.projName#' NEQ '' AND '#form.projName#' NEQ 'ALL'>
	AND PROJECT_DESC = '#TRIM(form.projName)#'
	</cfif>	
</cfif>		
				
	ORDER BY 		PMT_USERS.pmt_user_id, TAB_RECD_DT desc, PROJECT_DESC, PMT_TABS.TAB_NAME,	TAB_TYPE
				
  </cfquery>
  
  
  <cfoutput>
  <!--- Setting Start and End Row values--->
  <cfif isdefined('form.startRow')>
  	<cfset startRow = #form.startRow#>
  <cfelse>
  	<cfset startRow = 1>
  </cfif>
   <cfif isdefined('form.endRow')>
  	<cfset endRow = #form.endRow#>
  <cfelse>
  	<cfset endRow = #numberOfRows#>
  </cfif>
  <cfset theEnd = #startRow# + #numberOfRows#>
	 
	<!--- Header for Seacrh results page --->
		<table width="100%" cellpadding="0" cellspacing="0"  border="1" bgcolor="##DCDCDC">
			<tr align="left">		
				<td colspan="10" class="blueStarObjects">
			<font size="+1">Search Results</font>
				<br/> <strong>Total found:</strong> #search_query.recordcount#
				<cfif #search_query.recordcount# GT #numberOfRows#>				 
				<br/> <strong>Result Set:</strong> #startRow# -- #endRow#
				<br/> <strong>Pages:</strong>
					
					<cfset numOfNums = #search_query.recordcount#/ #numberOfRows#>
					
					<cfloop from="1" to="#Ceiling(numOfNums)#" index="x">
						<u><b><a href="##" name="pages" id="pages"  onclick="javascript: startRow.value =startRow_#x#.value; endRow.value =endRow_#x#.value; submit();" >#x#</a></b></u>&nbsp;
						<!--- Setting Start Row --->
						<cfif #x# EQ  1>
							<cfset theNum = 1>
						<cfelse>
							<cfset theNum = #numberOfRows# * (#x#-1)>
						</cfif>	
						
						<!--- Start Row --->				
						<input type="hidden" name="startRow_#x#" value="#theNum#" />
						<!--- End Row --->
						<cfif #Ceiling(numOfNums)# EQ #x#>						
							<input type="hidden" name="endRow_#x#" value="#search_query.recordcount#" />	
						<cfelse>
						 	<cfset theEnd = #theNum# + #numberOfRows#>
							<input type="hidden" name="endRow_#x#" value="#theEnd#" />
						</cfif>
					</cfloop>
				</cfif>
				</td>
			</tr>
		</table>	
  		</cfoutput>
	 
	 <!---Results Div size --->
	 <cfif #search_query.recordcount# LTE 5>
	  	<cfset dHeight = "100px">
	 <cfelseif #search_query.recordcount# LTE 25>
	  	<cfset dHeight = "200px">
	<cfelseif #search_query.recordcount# GTE 26>
	  	<cfset dHeight = "350px">
	</cfif>
		
		<cfif search_query.recordcount GT 0 >
		<div style="overflow:auto; height:<cfoutput>#dHeight#</cfoutput>; width:970">
		<table cellpadding="0" cellspacing="0" border="1">
			<!--- Returned Header --->
			<tr class="absoluteHeader" >							
							<td nowrap="nowrap">Tab</td>
							<td nowrap="nowrap">Project</td>
							<td nowrap="nowrap">Customer Name</td>
							<td nowrap="nowrap">Recd Date</td>
							<td nowrap="nowrap">Activity Type</td>
							<td nowrap="nowrap">Overall Status</td>
							<td nowrap="nowrap">Owner Status</td>
							<td nowrap="nowrap">Remote Status</td>						
							<td nowrap="nowrap">Creator</td>
							<td nowrap="nowrap">Remote</td>						
							<td nowrap="nowrap">Activity ID</td>						
							<td nowrap="nowrap">Tab ID</td>
							<td nowrap="nowrap">State</td>
							<td nowrap="nowrap">SCVP</td> 
							<td nowrap="nowrap">RVP</td> 						
							<td nowrap="nowrap">Activity Source</td>						
							<td nowrap="nowrap">eCRM Opty ID</td>
							<td nowrap="nowrap">eCRM Work ID</td>
							<td nowrap="nowrap" >eCRM SRID</td>
							<td nowrap="nowrap">RDS</td>
							<td nowrap="nowrap">Resp ID</td>
							<td nowrap="nowrap">Smart ID</td>
							<td nowrap="nowrap">Bell South Pkg ID</td>
							<td nowrap="nowrap">IOM</td>
							<td nowrap="nowrap">EMQDS</td>
							<td nowrap="nowrap">EMACD</td>
							<td nowrap="nowrap">Sales Contact</td>
							<td nowrap="nowrap">AGID</td>
							<td nowrap="nowrap">PID</td>
						</tr>
			<!--- Spacer for the Ab row--->
			<tr><td colspan="20">&nbsp;</td></tr>
			<!--- Data set --->
			<cfoutput query="search_query" startrow="#startRow#" maxrows="#numberOfRows#">
			<tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#" 
			    onClick="document.location='editProject.cfm?projectID=#ID#&tab=#TAB_ID#';"
				onMouseOver="this.bgColor='CDE6F3';ddrivetip('Click to Load<br/><b><u>Activity ID:</u></b>#ID# <br/><b><u>TAB ID:</u></b>#TAB_ID#');" 
				onMouseOut="this.bgColor='#iif(currentrow MOD 2,DE("ffffff"),DE("efefef"))#';hideddrivetip()" >
							<td nowrap="nowrap">#TAB_NAME#&nbsp;</td>
							<td nowrap="nowrap">#PROJECT_DESC#&nbsp;</td>
							<td nowrap="nowrap">#Cust_Name#&nbsp;</td>
							<td nowrap="nowrap">#dateformat(TAB_RECD_DT,'MM/DD/YY')# &nbsp;</td>
							<td nowrap="nowrap">#Type#&nbsp;</td>	
							<td nowrap="nowrap">#Overall#&nbsp;</td>
							<td nowrap="nowrap">#PRES#&nbsp;</td>
							<td nowrap="nowrap">#REMOTE#&nbsp;</td>	
							<td nowrap="nowrap">#Creator#&nbsp;</td>
							<td nowrap="nowrap">#Remote#&nbsp;</td>
							<td nowrap="nowrap">#ID#</td>	
							<td nowrap="nowrap">#TAB_ID#</td>						
							<td nowrap="nowrap">#State#&nbsp;</td>
							<td nowrap="nowrap">#SCVP#&nbsp;</td> 
							<td nowrap="nowrap">#RVP#&nbsp;</td> 
							<td nowrap="nowrap">#Source#&nbsp;</td>
							<td nowrap="nowrap">#Opty_ID#&nbsp;</td>
							<td nowrap="nowrap">#Work_ID#&nbsp;</td>
							<td nowrap="nowrap">#SRID_ID#&nbsp;</td>
							<td nowrap="nowrap">#RDS#&nbsp;</td>
							<td nowrap="nowrap">#Resp_ID#&nbsp;</td>
							<td nowrap="nowrap">#Smart_ID#&nbsp;</td>
							<td nowrap="nowrap">#BS_Pkg_ID#&nbsp;</td>
							<td nowrap="nowrap">#IOM#&nbsp;</td>
							<td nowrap="nowrap">#EMQDS#&nbsp;</td>
							<td nowrap="nowrap">#EMACD#&nbsp;</td>
							<td nowrap="nowrap">#Contact#&nbsp;</td>
							<td nowrap="nowrap">#AGID#&nbsp;</td>
							<td nowrap="nowrap">#PID#&nbsp;</td>							
			  </tr>				
			</cfoutput>
		 </table>
		 	</div> 
 
		
		<table align="center" class="">
		<tr align="center">
		<td colspan="14"><a href="search.cfm" class="vc" Target="_top" onMouseOver="window.status='New Search.';return true" onMouseOut="window.status='Done';return true">New Search</a></td>
		</tr>
		</table>
		
										
		<cfelseif search_query.recordcount EQ 0>
						<table width="100%" border=0 cellpadding=2 cellspacing=0>
						<tr><td colspan="3"><b><i>No records match the criteria specified. </i></b></td></tr>
						<tr align="center">
						<td><a href="search.cfm" class="vc" Target="_top" onMouseOver="window.status='New Search.';return true" onMouseOut="window.status='Done';return true">New Search</a></td>
						</tr>
						<tr><td>&nbsp;</td></tr> 
						</table>
	  </cfif> 
	  <cfoutput>

Open in new window

ASKER CERTIFIED SOLUTION
mltsy

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Wirt

ASKER
thanks
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
mltsy

No problem :)  Glad you got it working!  Do you happen to have an example of the function you actually used?  (in case anybody else is wondering the same thing and needs to know)
Wirt

ASKER
Ive kinda side tabled it for now but I think i can get it working
Wirt

ASKER
replace(TEXT_TO_HIGHLIGHT, SEARCH_TERM, "<span class='highlighted'>SEARCH_TERM</span>")

This working great!!! thanks again for the idea
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.