Custom Search Bar:
Description:
We will implement a custom search bar functionality using an Aura component. In Salesforce Lightning Aura components, you can indeed create a search bar functionality that allows users to search and filter data.
It highlights all occurrences of the search term in the content area. The highlighting helps users quickly locate and navigate through the matches.paragraph.
Here’s how the process works:
It handles the logic when the text is entered in search bar. It extracts the search term from the input field, and if the search term is empty, it clears any existing highlighted matches. Then, it calls the search and Highlight helper method to perform the actual search and highlighting.
The helper file contains methods that perform the actual search and highlighting. The searchAndHighlight method is responsible for identifying matches within the content and applying a highlighting CSS class to them. The highlight Match method applies the highlighting to different HTML elements (paragraphs, tables, rows, cells) within the content area.
In Style ‘.match’ class is used to highlight the matches with a yellow background, border radius, and shadow.
The media screen in the CSS define different styles for the search input field based on the screen width. This helps in making the component responsive, with different input field widths for different screen sizes.
Please note: It’s working for both Classic and Lightning View.
Codes:
Component:
<aura:component implements=”force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickActionWithoutHeader” access=”global”>
<lightning:input name=”text-12″ placeholder=”Search..” class =”customInput” aura:id=”text-12″ value=”” onchange=”{!c.searchButtonClick}”/>
<div id=”realTimeContents”>
<p>
<br/>
Merfantz Technologies
<br/>
<br/><span class=”space”></span>Note:(Your content insert here…)</p>
</div>
</aura:component>
Controller JS:
(
searchButtonClick: function(component, event, helper) {
var searchTerm = component.find(‘text-12’).get(‘v.value’).trim();
if($A.util.isEmpty(searchTerm)||searchTerm.length == 0){
var realTimeContents = document.getElementById(‘realTimeContents’);
var content = realTimeContents.innerHTML;
content = content.replace(/<span class=”match”>([^<]+)<\/span>/g, ‘$1’);
realTimeContents.innerHTML = content;
}
helper.searchAndHighlight(component, searchTerm);
}
})
Helper JS:
({
searchAndHighlight: function(component, searchTerm) {
if (searchTerm&&searchTerm!=’ ‘) {
var realTimeContents = document.getElementById(‘realTimeContents’);
var content = realTimeContents.innerHTML;
content = content.replace(/<span class=”match”>([^<]+)<\/span>/g, ‘$1’);
realTimeContents.innerHTML = content;
var searchTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, ‘\\$&’);
var searchTerm = searchTerm.replace(‘&’, ‘&’);
var searchTermRegEx = new RegExp(searchTerm, ‘ig’);
var para = document.getElementById(‘realTimeContents’);
var paragraphContent = para.innerHTML;
var matches =paragraphContent.match(searchTermRegEx);//.join(”).split(”);
if (matches != null && matches.length > 0) {
this.highlightMatch(component, searchTermRegEx,searchTerm);
return true;
}
}
},
highlightMatch: function(component, searchTermRegEx,searchTerm) {
var realTimeContents= document.getElementById(‘realTimeContents’);
var pElements = realTimeContents.getElementsByTagName(‘p’);
var tbodyElements = realTimeContents.getElementsByTagName(‘tbody’);
var trElements = realTimeContents.getElementsByTagName(‘tr’);
var tdElements = realTimeContents.getElementsByTagName(‘td’);
function replaceTextContent(match) {
return match.replace(searchTermRegEx, ‘<span class=”match”>$&</span>’);
}
for (var i = 0; i < pElements.length; i++) {
var pContent = pElements[i].innerHTML;
if(!searchTerm.includes(‘&’)){
pContent = pContent.replace(/&/g, ‘&’);
}
pElements[i].innerHTML = pContent.replace(/>([^<]*)</g, replaceTextContent);
}
for (var i = 0; i < tbodyElements.length; i++) {
var tbodyContent = tbodyElements[i].innerHTML;
if(!searchTerm.includes(‘&’)){
tbodyContent = tbodyContent.replace(/&/g, ‘&’);
}
tbodyElements[i].innerHTML = tbodyContent.replace(/>([^<]*)</g, replaceTextContent);
}
for (var j = 0; j < trElements.length; j++) {
var trContent = trElements[j].innerHTML;
if(!searchTerm.includes(‘&’)){
trContent = trContent.replace(/&/g, ‘&’);
}
trElements[j].innerHTML = trContent.replace(/>([^<]*)</g, replaceTextContent);
}
for (var k = 0; k < tdElements.length; k++) {
var tdContent = tdElements[k].innerHTML;
if(!searchTerm.includes(‘&’)){
tdContent = tdContent.replace(/&/g, ‘&’);
}
tdElements[k].innerHTML = tdContent.replace(/>([^<]*)</g, replaceTextContent);
}
realTimeContents.innerHTML = realTimeContents.innerHTML.replace(/(<\/?a(?:\s[^>]*)?>|<br[^>]*>|[^<]+)/ig, function(match) {
return match;
});
}
})
Style:
.THIS.button{padding-top: 60px;
height: 30%;
width : 100px;
}
.THIS .match {
background-color: #fff34d;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
padding: 1px 4px;
margin: 0 1px;
}
@media screen and (min-width: 768px) {
.THIS .customInput {
width: 50%;
border-radius: 5px;
background-color: #f2f2f2;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.7);
margin:auto;
}
}
@media screen and (max-width: 767px) {
.THIS .customInput {
width: 100%;
}
}
Output:
Classic in Desktop –
Lightning in mobile –
Related Links:
merfantz.com/blog/how-to-use-einstein-search-in-salesforce/
Author Bio
