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>