I have been working on creating a custom advanced visualforce search page for my users. It's currently working well, but I was wondering if there was a way to bold specific words that get output into a table (containing records). For example, I have a text box where users can start typing in a record name. There is a table that updates dynamically (using javascript) showing all the records found from a query using the text entered into the text box.
Is there a way that I could bold the exact text value in each record name cell so that just the part of the text that was searched for could be in bold? Ex: search for "new" would cause a record name of "Newsworthy" to show up but with just the "New" part in bold. I think this could help users identify the record they are looking for.
Thanks!
Here is the snippet of my code that might be useful to see:
<script type="text/javascript">
var oldG;
var oldAP;
var oldAC;
var delay = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
function doSearch() {
if (document.getElementById("{!$Component.geography}").value == '' || document.getElementById("{!$Component.subgeography}").value == '__' || document.getElementById("{!$Component.geography}").value != oldG) {
document.getElementById("{!$Component.subgeography}").value = '';
}
if (document.getElementById("{!$Component.agmtPurpose}").value == '' || document.getElementById("{!$Component.agmtCategory}").value == '__' || document.getElementById("{!$Component.agmtPurpose}").value != oldAP) {
document.getElementById("{!$Component.agmtCategory}").value = '';
document.getElementById("{!$Component.agmtType}").value = '';
}
if (document.getElementById("{!$Component.agmtCategory}").value == '' || document.getElementById("{!$Component.agmtType}").value == '__' || document.getElementById("{!$Component.agmtCategory}").value != oldAC) {
document.getElementById("{!$Component.agmtType}").value = '';
}
oldG = document.getElementById("{!$Component.geography}").value;
oldAP = document.getElementById("{!$Component.agmtPurpose}").value;
oldAC = document.getElementById("{!$Component.agmtCategory}").value;
searchServer(
document.getElementById("Name").value,
document.getElementById("{!$Component.agmtPurpose}").value,
document.getElementById("{!$Component.agmtCategory}").value,
document.getElementById("{!$Component.agmtType}").value,
document.getElementById("{!$Component.geography}").value,
document.getElementById("{!$Component.subgeography}").value,
document.getElementById("account").value,
document.getElementById("agmtnumber").value);
}
function doClear() {
document.getElementById("account").value = '';
document.getElementById("Name").value = '';
document.getElementById("{!$Component.agmtPurpose}").value = '';
document.getElementById("{!$Component.geography}").value = '';
document.getElementById("{!$Component.agmtCategory}").value = '';
document.getElementById("{!$Component.agmtType}").value = '';
document.getElementById("{!$Component.subgeography}").value = '';
document.getElementById("account").value = '';
document.getElementById("agmtnumber").value = '';
searchServer(
document.getElementById("Name").value,
document.getElementById("{!$Component.agmtPurpose}").value,
document.getElementById("{!$Component.agmtCategory}").value,
document.getElementById("{!$Component.agmtType}").value,
document.getElementById("{!$Component.geography}").value,
document.getElementById("{!$Component.subgeography}").value,
document.getElementById("account").value,
document.getElementById("agmtnumber").value);
}
$(document).ready(function () {
$('input').keyup(function () {
delay(function () {
doSearch();
}, 700);
});
});
var src_str = $("#nameoutput").html();
var term = "Name";
term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "gi");
src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");
$("#nameoutput").html(src_str);
</script>
<div style="position: relative;">
<apex:outputpanel >
<apex:actionstatus id="status">
<apex:facet name="start">
<div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb;
height: 100%;opacity:0.65;width:100%;">
<div class="waitingHolder" style="top: 74.2px; width: 91px;">
<img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
<span class="waitingDescription">Loading...</span>
</div>
</div>
</apex:facet>
</apex:actionstatus>
</apex:outputpanel>
</div>
<apex:actionFunction name="searchServer" action="{!runSearch}" status="loadStatus" rerender="results,debug,errors">
<apex:param name="Name" value="" />
<apex:param name="agmtPurpose" value="" />
<apex:param name="agmtCategory" value="" />
<apex:param name="agmtType" value="" />
<apex:param name="geography" value="" />
<apex:param name="subgeography" value="" />
<apex:param name="account" value="" />
<apex:param name="agmtnumber" value="" />
</apex:actionFunction>
<table cellpadding="2" cellspacing="2">
<apex:outputText Value="Limit to my agreements" style="text-align:center" >
<apex:inputCheckbox value="{!allOrMyAgmt}" title="Requestor or Owner" onchange="doSearch(), doMyOrAllAgmts()" id="allOrMy" />
</apex:outputText>
<br/>
<br/>
<tr>
<td style="font-weight:bold;" >Agreement Name<br/>
<input type="text" id="Name" /><br/><br/>
</td>
</tr>
<tr>
<td style="font-weight:bold;" >Account Name<br/>
<input type="text" id="account" /><br/><br/>
</td>
</tr>
<tr>
<td style="font-weight:bold;" >Agreement Number<br/>
<input type="text" id="agmtnumber" /><br/><br/>
</td>
</tr>
<tr>
<td style="font-weight:bold;">Agreement Purpose<br/>
<apex:inputfield id="agmtPurpose" value="{!agmt1.Nike_SF_Contract_Category__c}" onchange="doSearch();" >
</apex:inputfield><br/><br/>
</td>
</tr>
<tr>
<td style="font-weight:bold;">Agreement Category<br/>
<apex:inputfield id="agmtCategory" value="{!agmt1.Apttus__Agreement_Category__c}" onchange="doSearch();" >
</apex:inputfield><br/><br/>
</td>
</tr>
<tr>
<td style="font-weight:bold;">Agreement Type<br/>
<apex:inputfield id="agmtType" value="{!agmt1.NikeSF_Agreement_Type__c}" onchange="doSearch();" >
</apex:inputfield><br/><br/>
</td>
</tr>
<tr>
<td style="font-weight:bold;">Geography<br/>
<apex:inputfield id="geography" value="{!agmt1.NikeSF_Geography__c}" onchange="doSearch();" >
</apex:inputfield><br/><br/>
</td>
</tr>
<tr>
<td style="font-weight:bold;">Sub-Geography<br/>
<apex:inputfield id="subgeography" value="{!agmt1.NikeSF_Sub_Geography__c}" onchange="doSearch();" >
</apex:inputfield>
</td>
</tr>
<apex:outputText Value="Hide Filters" style="text-align:center" >
<apex:inputCheckbox value="{!hideFilts}" title="Hide all filters" onchange="doHideFilters()" id="hideFilt" />
</apex:outputText>
<br/>
<br/>
</table>
<apex:pageBlockButtons location="bottom">
<apex:commandButton style="text-align:center" onClick="doClear()" title="Clear" value="Clear" rerender="results,debug,errors"/>
</apex:pageBlockButtons>
</apex:pageBlock>
</td>
<td valign="top">
<apex:pageBlock mode="edit" id="results">
<apex:pageBlockButtons location="top" >
<apex:outputPanel id="myButtons">
<apex:commandButton action="{!Beginning}" title="Beginning" value="<<" disabled="{!disablePrevious}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
<apex:commandButton action="{!Previous}" title="Previous" value="<Previous" disabled="{!disablePrevious}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
<apex:commandButton action="{!Next}" title="Next" value="Next>" disabled="{!disableNext}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
<apex:commandButton action="{!End}" title="End" value=">>" disabled="{!disableNext}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
<br/>
</apex:outputPanel>
</apex:pageBlockButtons>
<apex:pageBlockButtons location="bottom" >
<apex:outputPanel id="myButtons2">
<apex:outputlabel style="text-align:center" value="Showing Page #{!pageNumber} of {!totalPages}"/>
<br/>
<br/>
<apex:commandButton action="{!Beginning}" title="Beginning" value="<<" disabled="{!disablePrevious}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
<apex:commandButton action="{!Previous}" title="Previous" value="<Previous" disabled="{!disablePrevious}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
<apex:commandButton action="{!Next}" title="Next" value="Next>" disabled="{!disableNext}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
<apex:commandButton action="{!End}" title="End" value=">>" disabled="{!disableNext}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
</apex:outputPanel>
</apex:pageBlockButtons>
<apex:pageBlockTable value="{!agmts}" var="agmt">
<apex:column >
<apex:facet name="header">
<apex:commandLink value="Agreement Name " status="loadStatus" action="{!toggleSort}" rerender="results,debug" style="{!IF(sortValue=='Name', 'font-style: italic', 'font-style: normal')}">
<apex:outputPanel layout="none" rendered="{!sortValue=='Name' && sortDir=='desc'}">▲</apex:outputPanel>
<apex:outputPanel layout="none" rendered="{!sortValue=='Name' && sortDir!='desc'}">▼</apex:outputPanel>
<apex:param name="sortField" value="Name" assignTo="{!sortField}"/>
<apex:param name="sortValue" value="Name" assignTo="{!sortValue}"/>
</apex:commandLink>
</apex:facet>
<div id='nameoutput' >
<apex:outputLink value="/{!agmt.id}">{!agmt.Name}</apex:outputLink>
</div>
</apex:column>
Best Answer
There is not a Visualforce specific way to do this, but you could use html and a javascript library like jquery's Hightlight plugin.
Here is an example implementation from another StackExchange question that you could use as a starting point.