-
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
What is the Process Builder in Salesforce? | The Ultimate Guide
What is the Process Builder? The Process Builder is a visual tool that allows users to build complex business processes using a drag-and-drop interface. It…
5 Essential Tips for Successful Salesforce Migration
In today's digital landscape, businesses rely heavily on robust customer relationship management (CRM) platforms like Salesforce to manage their interactions, data, and sales pipelines. However,…
How to Set Up Web-to-Lead in Salesforce | The Complete Guide
What is Salesforce Web to Lead Salesforce web to lead is a tool for capturing and saving leads from your website. Salesforce has this capability…
Popular Salesforce Videos
Use Aura Component in Screen Flow | Salesforce Flow Builder Tutorial
Hello Trailblazers, In this video, we will learn how to use Aura Component in Salesforce Screen Flow. How to validate the Lightning Component Input from…
Salesforce Security – An Encryption Guide For The Paranoid
If you are using Salesforce, you would be having a lot of data stored in Salesforce objects. Some of it would even be sensitive enough…
The Future of Salesforce Security and Authentication
Learn how to enable the best security in a way that will have your users thanking you. Be the first to learn about the next-gen…
