-
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 a Salesforce Consultant?
You might be familiar with Salesforce yet have wondered what the heck a Salesforce consultant is. If I already bought and use Salesforce in my…
Salesforce Integration with Postman - The How-to Guide
Postman is an API advancement environment that is utilized to test an API, make and run robotized tests, look at reactions, and do much more…
What is Batch Apex in Salesforce? | All You Need to Know
Batch Apex allows developers to process large amounts of data in a batch, without hitting governor limits, which are limits on resources like CPU time,…
Popular Salesforce Videos
Reason to Switch the Job | Future of Salesforce Job Market | Christopher A Hopper
Here is the Glimpse of Conversation with Christopher A Hopper on the topic "Reason to Switch the Job". This is the very first episode of…
Creating a To-do List with Custom Events | Salesforce Developer Quick Takes
Creating a ToDo list will show us how we can take data from one component and pass it to another. In our ToDo list component,…
Lightning Component Development - 01 - Basic of Lightning Framework, Component Bundle, App Builder
What is covered in this session? * What is Lightning Component Framework? * Lightning Component Across Salesforce Ecosystem * When to use lightning component? * Where…
