-
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
Sample Web Service With Workbench
Being a fresh learner of Salesforce this blog is helpful to guide you about writing a web service using Rest and calling the web service through…
Managing Billing Processes in Salesforce: Subscription Management and CPQ (Configure-Price-Quote)
In today's business landscape, retaining customers is the top priority for those who want to ensure scalability and predictable business growth. To achieve this, customers…
Best Practices in Testing | Salesforce Developer Guide
To be successful in the IT sector, you must be familiar with all of the finest testing procedures. It is critical to have testing best…
Popular Salesforce Videos
Run UI Tests with UTAM | Salesforce Developer Tutorial
Testing apps is critical to ensure quality and there are different types of tests such as unit tests, integrations tests or end-to-end tests just to…
An Introduction to Salesforce org Nonprofit Cloud
Did you know that over 30,000 nonprofit organizations use Salesforce? Salesforce.org’s premier product, NPSP, helps nonprofits drive greater impact by connecting everything they do. Learn…
Configuration Attribute In Salesforce CPQ | Salesforce Development Tutorial | Learn Salesforce Series by Algoworks
Configuration attributes can be used in setting up the value of multiple shared product option fields simultaneously in Salesforce CPQ. In this Salesforce tutorial, you…
