-
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 Accessibility Overview 2024: Features and Tips
The term "accessibility" has taken center stage over the past decade, representing a fundamental shift in how we view and interact with digital platforms. It…
What Are Salesforce Managed Services?
What Are Salesforce Managed Services? Salesforce Managed Services encompass a range of professional services designed to help businesses manage, maintain, and optimize their Salesforce environment.…
Case Management: Email-To-Case | The Salesforce Developer Guide
Case Management Case Management means gathering all the client/customer cases into one place and ensuring they go to the right person, for the resolved cases,…
Popular Salesforce Videos
What is a Salesforce Admin?
Salesforce administrators are the gatekeepers of their employer's sales and marketing data. They create each user account and determine the proper level of access based…
How to Use Customer 360 | Salesforce
See how Salesforce Customer 360, our entire portfolio of technology, unites your team with company data on one integrated CRM platform, delivering the personal experiences…
Salesforce Admin Certification 2020 Questions Explained with References - Part I
How to prepare and pass Salesforce Admin Certification with Practice Exam Questions 2020 practice questions and answers for the Salesforce Administration Salesforce Certified Admin Exam…
