-
How to make a Search Bar using Javascript in Salesforce?
How to make a searchbar for Account records using Javascript?
-
1 Reply
-
Hi Manpreet,
you can try something like this
Page
<apex:page controller="SearchJavascriptController">
<html>
<head>
<style>* {
box-sizing: border-box;
}#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}#myTable th, #myTable td {
text-align: left;
padding: 12px;
}#myTable tr {
border-bottom: 1px solid #ddd;
}#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body><apex:form id="theForm">
<apex:pageBlock >
<h2>My Account</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
</input>
</apex:pageBlock>
<table id="myTable">
<tr>
<th><h1> ACCOUNT NAME</h1></th>
<th><h1> ACCOUNT ID</h1></th>
<th><h1>ANNUAL REVENUE</h1></th>
</tr>
<apex:repeat value="{!accountList}" var="acc" id="theRepeat">
<tr>
<td>{!acc.name}</td>
<td>{!acc.id}</td>
<td>{!acc.AnnualRevenue}</td>
</tr>
</apex:repeat>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
console.log(input);
filter = input.value.toUpperCase();table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</apex:form>
</body>
</html></apex:page>
Controller
public with sharing class SearchJavascriptController {
public list<Account>accountlist { get; set; }
public SearchJavascriptController()
{
accountList = new list<Account>();
accountList =[Select Name,Id,AnnualRevenue From Account];
}}
thanks
Log In to reply.
Popular Salesforce Blogs
Salesforce vs Hubspot: Which CRM is the Best Fit for Your Business Needs?
As companies grow and expand, managing customer relationships becomes a complex and challenging task. This is where customer relationship management (CRM) software comes into play.…
Omni-Channel Overview in 2024
Omni-Channel is a Customer Service and console-based Salesforce feature that helps automatically route of different types of work items (such as Leads and Cases) to…
Salesforce Einstein Voice – Stop typing and start Selling!
Imagine each of your Sales reps had a personal assistant who could handle monotonous and boring tasks while your Sales reps stay focused on their…
Popular Salesforce Videos
Email to case in Salesforce | Learn Salesforce
In this video, Shrey explained complete Record Level Security in Salesforce which includes: 1. What is Email-to-case in Salesforce? 2. Where can Email-to-case be used?…
Salesforce — How To Improve Customer Service for Small Businesses
How can a small business improve its customer service? More than ever before, supporting customers is key to a small business's survival — so give…
Customer Lifecycle Analytics | Salesforce
Customer Lifecycle Analytics, built on Tableau CRM, helps you glean even more value from your Salesforce Surveys and Salesforce Feedback Management responses with embedded analytics…
