Toggle Side Panel

  • Home
  • Articles
    • All Articles
    • Blogs
    • Videos
    • Infographics
  • Consultants
    • Salesforce Product Expertise
      • Top Salesforce ConsultantsTop Salesforce Consultants
      • Marketing Cloud ConsultantsMarketing Cloud Consultants
      • Service Cloud ConsultantsService Cloud Consultants
      • Experience Cloud ConsultantsExperience Cloud Consultants
      • Analytics Cloud ConsultantsAnalytics Cloud Consultants
    • Salesforce Industry Expertise
      • Non-Profit Cloud ConsultantsNon-Profit Cloud Consultants
      • Financial Service Cloud ConsultantsFinancial Service Cloud Consultants
      • Health Cloud ConsultantsHealth Cloud Consultants
      • Commerce Cloud ConsultantsCommerce Cloud Consultants
      • Manufacturing Cloud ConsultantsManufacturing Cloud Consultants
    • Salesforce Experts by Location
      • USATop Salesforce Consultants in USA
      • IndiaTop Salesforce Consultants in India
      • AustraliaTop Salesforce Consultants in Australia
      • United KingdomTop Salesforce Consultants in UK
      • CanadaTop Salesforce Consultants in Canada
  • Webinars
  • Marketplace
  • Advertise With Us
  • Contact Us
  • Discussions
More options
    Sign in Sign up
    • Home
    • Articles
      • All Articles
      • Blogs
      • Videos
      • Infographics
    • Consultants
      • Salesforce Product Expertise
        • Top Salesforce ConsultantsTop Salesforce Consultants
        • Marketing Cloud ConsultantsMarketing Cloud Consultants
        • Service Cloud ConsultantsService Cloud Consultants
        • Experience Cloud ConsultantsExperience Cloud Consultants
        • Analytics Cloud ConsultantsAnalytics Cloud Consultants
      • Salesforce Industry Expertise
        • Non-Profit Cloud ConsultantsNon-Profit Cloud Consultants
        • Financial Service Cloud ConsultantsFinancial Service Cloud Consultants
        • Health Cloud ConsultantsHealth Cloud Consultants
        • Commerce Cloud ConsultantsCommerce Cloud Consultants
        • Manufacturing Cloud ConsultantsManufacturing Cloud Consultants
      • Salesforce Experts by Location
        • USATop Salesforce Consultants in USA
        • IndiaTop Salesforce Consultants in India
        • AustraliaTop Salesforce Consultants in Australia
        • United KingdomTop Salesforce Consultants in UK
        • CanadaTop Salesforce Consultants in Canada
    • Webinars
    • Marketplace
    • Advertise With Us
    • Contact Us
    • Discussions
    Close search

    Activity › Forums › Salesforce® Discussions › How to make a Search Bar using Javascript in Salesforce?

    Tagged: Account, Javascript in Salesforce, Salesforce Apex, Salesforce Records, Salesforce SOQL, Search Box

    • Salesforce® Discussions

      How to make a Search Bar using Javascript in Salesforce?

      Posted by Manpreet on March 22, 2017 at 7:39 AM

      How to make a searchbar for Account records using Javascript?

      Vikas Kumar replied 9 years ago 2 Members · 1 Reply
      • Account
      • Javascript in Salesforce
      • Salesforce Apex
      • Salesforce Records
      • Salesforce SOQL
      • Search Box
    • 1 Reply
    • Vikas Kumar

      Member
      March 23, 2017 at 3:00 PM

      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.

    • Public
    • All Members
    • My Connections
    • Only Me
    • Public
    • All Members
    • My Connections
    • Only Me
    • Public
    • All Members
    • My Connections
    • Only Me

    application solution

    Popular Salesforce Blogs

    salesforce app dev

    The Future of Salesforce App Development

    Blog in Others

    The use of mobile phones has made a lot of transformation with the way businesses are getting their products and services available to people. There…

    App Developers, App Development Platform, Backend Service, Business Information, Business Performance
    Mobilunity Jan 18, 2021
    3,429  Views

    AI-Powered Salesforce Integrations: Reevaluating Traditional Tools

    Blog in Others

    In the ever-evolving world of technology, I recently discovered the power of AI bots for generating Apex and middleware code for Salesforce integrations. The results?…

    Authentication, Automation, code generation, Code Snippets, Competitive
    Twistellar Jun 2, 2023
    1,283  Views

    Generate More Leads With Salesforce's Data.com

    Blog in Data, Salesforce

    Salesforce.com's Sales Cloud customer relationship management (CRM) software includes a sales and lead creation component called Data.com. Through its enormous user-generated database, the Data.com platform…

    AppExchange Packages, Apps, Business, Clean Account, Clean Jobs
    Apphienz Nov 3, 2021
    2,703  Views

    Popular Salesforce Videos

    4 Benefits of Salesforce Vlocity Communications Clouds

    4 Benefits of Salesforce Vlocity Communications Clouds

    Video in Salesforce Cloud Platform, Salesforce Training

    Vlocity Communications effortlessly collaborate with Salesforce Service Cloud to design a solution to garner personalized and uninterrupted experience for customers throughout their channels. This not…

    Salesforce Training, Salesforce Service Cloud, salesforce, Salesforce Video, Customers
    Cyntexa May 9, 2022
    2,643  Views
    Welcome to an all-digital, work-from-anywhere world | Salesforce Customer 360 | Salesforce Anywhere

    Welcome to an all-digital, work-from-anywhere world | Salesforce Customer 360 | Salesforce Anywhere

    Video in Salesforce Stories

    Welcome to an all-digital, work-from-anywhere world. With Salesforce Customer 360, Salesforce can connect your teams, delight your customers, and grow your business together. Take the…

    salesforce, Salesforce Video, Customer 360, sales, Salesforce Customers
    Pooja Jul 8, 2020
    1,612  Views
    Security in Salesforce | Security Levels in Salesforce

    Security in Salesforce | Security Levels in Salesforce

    Video in Salesforce Security

    This 'Security in Salesforce'  video by Edureka will help you understand the different levels of security in Salesforce. It will also talk about some of…

    Salesforce Tutorial, Salesforce Security, Salesforce Video, Salesforce Learning, Best Practices
    Jogender Sep 30, 2021
    2,448  Views
    Footer Forcetalks logo

    support@forcetalks.com

    • twitterx

    Quick Links

    Advertise with Us

    Salesforce® Articles

    Dreamforce 2023

    Top Salesforce® Bloggers 2023

    Top Salesforce Consultants

    Get Listed

    Company

    Contact Us

    About Us

    Privacy Policy

    Terms & Conditions

    InsightHub

    Salesforce Blogs

    Salesforce Videos

    Salesforce Groups

    Salesforce Jobs

    © 2026 - Forcetalks ● All Rights Reserved

    Salesforce® is a trademark of Salesforce® Inc. No claim is made to the exclusive right to use “Salesforce”. Any services offered within the Forcetalks website/app are not sponsored or endorsed by Salesforce®.

    Try AuditMyCRM - It is a Salesforce CRM Audit tool which comprehensively scans your Salesforce org and gives you the list of errors or warnings you need to take care of.
    We use cookies to enhance your browsing experience. Please see our privacy policy if you'd like more information on our use of cookies.