Technology has always been a bridge, but today, it feels more like a mirror. With the rapid rise of AI , we are seeing things enter our lives and leave them at a pace we can barely track. To understand where this is going, we first have to understand how technology actually impacts the core of who we are. The Survivalist vs. The Ego Our minds are biologically wired for one thing: survival . We are designed to handle the worst-case scenario, an ancient instinct gifted to us by nature. We consider ourselves conscious decision-makers, but a critical question remains: Who is really making the call?
Here is sample code for client side search with the help of jQuery in visuaforce page. By using below code you can make FAQ type functionality or perform a search using specific phrase or word. In below sample code , We are using account details like name, phone.
Sample Code
<apex:page controller="PageSearch" showHeader="false" doctype="html-5.0" sidebar="false" applyHtmlTag="true" id="page" lightningStylesheets="true">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title> Salesforce Lightning Design System </title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<apex:slds />
<script>
var j$ = jQuery.noConflict();
</script>
</head>
<body>
<div class="slds-scope">
<div class="container-fluid">
<div class="slds-grid slds-gutters">
<div style="padding: 0.5%;width: 142px;margin-left:2%;" class="slds-col">
<span class="slds-avatar">
<img alt="Person name" src="/apexpages/slds/latest/assets/images/avatar2.jpg" title="Person name" />
</span>
<span Id="messageTitle"> How may i help you?</span>
</div>
<div style="padding: 0.5%;width: 142px;" class="slds-col">
<div class="slds-form-element">
<div class="slds-form-element__control">
<div class="slds-combobox_container">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-expanded="false" aria-haspopup="listbox" role="combobox">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<input id="myInput" type="text" class="slds-input slds-combobox__input faq" aria-autocomplete="list" aria-controls="listbox-id-1" autoComplete="off" role="textbox" placeholder="Search..." />
<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right">
<svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
</svg>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="padding: 0.5%;width: 142px;" class="slds-col">
<div class="slds-icon-eq slds-is-animated" style="margin-left: 89%;margin-top: 3%;" title="Description of the icon when needed">
<div class="slds-icon-eq__bar"></div>
<div class="slds-icon-eq__bar"></div>
<div class="slds-icon-eq__bar"></div>
<span class="slds-assistive-text">Text alternative when needed</span>
</div>
</div>
</div>
<hr/><br/>
<div id="searchdiv" class="container-fluid">
<apex:repeat value="{!AccList}" var="item" id="repeat">
<div id="questions">
<article class="slds-card">
<div class="slds-card__header slds-grid" id='faqs'>
<div id ="sectiond" class="slds-section">
<h3 id="sectionTitle" class="slds-section__title">
<button type="button" class="slds-button slds-section__title-action">
<svg aria-hidden="true" class="slds-section__title-action-icon slds-button__icon slds-button__icon--left">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg> <a href=""><b>{!item.Name}</b></a></button>
</h3>
<div id="sectionContent" class="slds-section__content">
<h2> <button type="button" class="slds-button slds-section__title-action">
<a href="">{!item.Phone}</a></button>
</h2>
</div>
</div>
</div>
</article>
</div>
</apex:repeat>
</div>
</div>
</div>
<script>
j$(document).ready(function(){
j$("#myInput").on("keyup", function() {
var value = j$(this).val().toLowerCase();
j$("#questions #faqs").filter(function() {
j$(this).toggle(j$(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
/*SLDS Sections*/
j$('.slds-section__content').hide();
j$('.slds-section__title').find('button').find('svg').css('transition', '1s');
j$('.slds-section__title').click(function(){
j$(this).parent().toggleClass('slds-is-open');
if(j$(this).parent().hasClass('slds-is-open')){
j$(this).parent().find('.slds-section__content').show();
}else{
j$(this).parent().find('.slds-section__content').hide();
}
});
</script>
</body>
</html>
</apex:page>