1

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'}">&#x25B2;</apex:outputPanel>
                            <apex:outputPanel layout="none" rendered="{!sortValue=='Name' && sortDir!='desc'}">&#x25BC;</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>
2

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.

| improve this answer | |
  • Hey JimRae, I am having difficulty getting this to work when I copied over the code from the example. I pasted a snippet of my code in my question above. All I was trying to do is highlight the field output value where text = name as a test. Eventually I'd like to tie the value to what text is typed into the input (id=Name) field. Thanks! – Matt Mar 6 '15 at 19:52
  • Did you download the plugin as a static resource, and are you including it on your page? And where are you calling the highlight method in your javascript? You should have something like this $("h1").highlight("highlight"); somewhere in your doSearch() method. – JimRae Mar 6 '15 at 20:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.