Creating A Lightning Design Multi-Object AutoComplete Search Box In Salesforce Visualforce

Hello There! Welcome Back 🙂

Today we are gonna learn to create a lightning design multi-object AutoComplete search box for our records in Salesforce Visualforce.

Things we will be using:

Salesforce Lightning Design System
Salesforce AJAX Toolkit A.K.A sforce
jQuery

Step 1: Gathering the resources we need.

Salesforce Lightning Design System:
1. Download the Custom Scoped CSS form here with your desired Scoping Class. (be sure to prefix your scoping class with a dot)
  The Scoping class wraps your content using the Lightning Design System to avoid CSS conflicts.
  I am using “slds” as a scoping class in my case.
2. The file you download will be named “salesforce-lightning-design-system.zip”, just rename it to something convenient and short like “LDS”.
3. Upload the zip file as your Static Resource.
Salesforce AJAX Toolkit A.K.A sforce:
This is provided by Salesforce out of the box, just like including a file from a directory.
<script src="../../soap/ajax/36.0/connection.js" type="text/javascript"></script>
jQuery:
We will be using CDN for this here, you can always have it as a static resource. Either way is fine.
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

Now we have all the stuff we need, lets move to the code part.

Step 2: The Code.

First we put all the resources into the page. (Lines 2 to 11)
Declaring the sessionId variable (Important & Needed to work with Salesforce AJAX Toolkit). (Lines 7 to 9)
Create SLDS Lookup Component as shown in the SLDS website here, but without the List items as we are gonna dynamically add the list items to it. (Lines 13 to 40)
To know more on getting started with The Lightning Design System you can refer my another blog post.
Query all for the records as per the input and displaying it in the dropdown. (Lines 49 to 88)
Getting a particular record’s details upon selecting it from the search results list. (Lines 90 to 98 & 100 to 108)

<apex:page>
   <!– Lightning Design System Source –>
   <apex:stylesheet value="{!URLFOR($Resource.SLDS102, ‘assets/styles/salesforce-lightning-design-system-vf.css’)}" />
   <!– jQuery CDN –>
   <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
   <!– Declare SessionId Variable For AJAX Toolkit –>
   <script type="text/javascript">
      var __sfdcSessionId = ‘{!GETSESSIONID()}’;
   </script>
   <!– Salesforce AJAX Toolkit Source –>
   <script src="../../soap/ajax/36.0/connection.js" type="text/javascript"></script>
   <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <div class="slds">
         <div class="slds-lookup" data-select="multi" data-scope="single" data-typeahead="true">
            <div class="slds-form-element">
               <label class="slds-form-element__label" for="lookup">Search</label>
               <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon–right">
                  <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
                     <use xlink:href="{!$Resource.SLDS102}/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
                  </svg>
                  <!– Input With onkeyup Attribute To Search For Records For Every Value Entered –>
                  <input id="searchInput" class="slds-input" type="text" placeholder="Search Records" onkeyup="searchActs(j$(this))" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="SrchDrpDwn" />
               </div>
            </div>
            <div class="slds-lookup__menu" role="listbox" id="SrchDrpDwn" style="display:none;">
               <div class="slds-lookup__item">
                  <button class="slds-button">
                     <svg aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon–small">
                        <use xlink:href="{!$Resource.SLDS102}/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
                     </svg>
                     &quot;<span id="searchText"></span>&quot; in Accounts &amp; Leads
                  </button>
               </div>
               <!–Search Results UL–>
               <ul class="slds-lookup__list" role="presentation" id="searchResultsUL" style="max-height: 240px;"></ul>
            </div>
         </div>
         <!–Div to Show Selected Record Details–>
         <div id="Info" style="width:510px;margin-left:15px;margin-top:15px;"></div>
      </div>
      <script>
         var j$ = jQuery.noConflict();

         function searchActs(key){
         j$(‘#’+key.attr(‘aria-activedescendant’)).show();
         //Grabbing The Input Field Value
         searchKey = key.val();
         if(searchKey == ”)
         j$(‘#’+key.attr(‘aria-activedescendant’)).hide();
         j$(‘#searchText’).text(searchKey);
         //Querying For Records In Accounts Name Matching The Input in The Text Field
         result = sforce.connection.query("Select Id, Name from Account WHERE Name LIKE ‘"+searchKey+"%’ LIMIT 5");
         records = result.getArray("records");

         var searchLis ="<li class=\"slds-list__item slds-has-divider–bottom-space\" style=\"padding-left: 5px; font-weight: 600; margin-bottom:3px; padding-bottom:3px; font-size: 18px;\">Accounts</li>";
         //Creating List Elements Based on Query Results
         if(records.length > 0){
         for(var i=0; i<records.length; i++){
         //List Elements With Onclick and ID Attributes
         searchLis += ‘<li onclick="accInfo(\”+records[i].Id+’\’);" class="slds-lookup__item"><a id="’+records[i].Id+’" href="#" role="option"><svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon–small">’
         +'<use xlink:href="{!$Resource.SLDS102}/assets/icons/standard-sprite/svg/symbols.svg#account"></use></svg>’+records[i].Name+'</a></li>’;
         }
         }else{
         searchLis += ‘<li class="slds-lookup__item">No Records Found</li>’;
         }
         //Querying For Records In Leads Name Matching The Input in The Text Field
         result = sforce.connection.query("Select Id, Name from Lead WHERE Name LIKE ‘"+searchKey+"%’ LIMIT 5");
         records = result.getArray("records");

         searchLis +="<li class=\"slds-list__item slds-has-divider–bottom-space\" style=\"padding-left: 5px; font-weight: 600; padding-bottom:3px; margin-bottom:3px; margin-top:6px; font-size: 18px;\">Leads</li>";
         //Creating List Elements Based on Query Results
         if(records.length > 0){
         for(var i=0; i<records.length; i++){
         //List Elements With Onclick and ID Attributes
         searchLis += ‘<li onclick="leadInfo(\”+records[i].Id+’\’);" class="slds-lookup__item"><a id="’+records[i].Id+’" href="#" role="option"><svg aria-hidden="true" class="slds-icon slds-icon-standard-lead slds-icon–small">’
         +'<use xlink:href="{!$Resource.SLDS102}/assets/icons/standard-sprite/svg/symbols.svg#lead"></use></svg>’+records[i].Name+'</a></li>’;
         }
         }else{
         searchLis += ‘<li class="slds-lookup__item">No Records Found</li>’;
         }
         //Appending All The Created Result List Elements To the UL Tag
         j$(‘#searchResultsUL’).html(searchLis);
         }

         //Function To Get Account Record’s Details on Record Click
         function accInfo(actId){
         j$(‘#SrchDrpDwn’).fadeOut();
         //ID Based Retrieval Instead Of Query to Get Record Details Of The Selected Record
         result = sforce.connection.retrieve("Name,BillingCountry", "Account", [actId]);
         j$(‘#searchInput’).val(result[0].Name);
         //Displaying The Record Details in Record Details Div
         j$(‘#Info’).html(‘<u>Account</u><br/><strong>Name:</strong> ‘+result[0].Name+'<br/><strong>Billing Country:</strong> ‘+result[0].BillingCountry);
         }

         //Function To Get Lead Record’s Details on Record Click
         function leadInfo(ldId){
         j$(‘#SrchDrpDwn’).fadeOut();
         //ID Based Retrieval Instead Of Query to Get Record Details Of The Selected Record
         result = sforce.connection.retrieve("Name,Status", "Lead", [ldId]);
         j$(‘#searchInput’).val(result[0].Name);
         //Displaying The Record Details in Record Details Div
         j$(‘#Info’).html(‘<u>Lead</u><br/><strong>Name:</strong> ‘+result[0].Name+'<br/><strong>Lead Status:</strong> ‘+result[0].Status);
         }
      </script>
   </html>
</apex:page>

That is it! And your search box will look like this:

Congrats, we just created a Dynamic Lightning Design style Multi Object AutoComplete Search Box. Amazing, Right?

You can explore the Salesforce AJAX Toolkit here.

If you like the content, give it some sharing :)

Creating A Lightning Design Multi-Object AutoComplete Search Box In Salesforce Visualforce

Table of contents

Step 1: Gathering the resources we need.

Step 2: The Code.