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 8 years, 10 months 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

    Einstein for Salesforce AI Specialist Certification

    Blog in Salesforce Training

     AI is everywhere, supporting every sector and department of various industries. The Salesforce platform also provides easy integration and application of AI within the system.…

    Customizing Task in Salesforce, salesforcedeveloper
    Ray brad Aug 1, 2025
    138  Views
    Bypass Salesforce Governor Limits

    Bypass Salesforce Governor Limits when Working with Files

    Blog in Salesforce Apex

    Introduction Salesforce is a multi-tenant system. This means Salesforce resources are shared by all Salesforce accounts. To prevent the system from abuse and to maintain…

    Apex Transaction, Apex Triggers, API, API Server, AppExchange
    Vishesh Singhal Oct 13, 2022
    3,708  Views

    Mastering Your Path to Success: Preparing for the Salesforce Admin Certification

    Blog in Salesforce Admin

    Introduction Are you ready to unlock new heights in your career within the dynamic realm of Salesforce administration? Achieving the esteemed title of a certified…

    Attainment, Beacon, Bite-Sized Videos, Blogs and Websites, Bolster
    SF Aug 24, 2023
    1,911  Views

    Popular Salesforce Videos

    myTrailhead Product Filters | Salesforce Tutorial Video

    myTrailhead Product Filters | Salesforce Tutorial Video

    Video in Others, Salesforce Training, Trailhead

    Salesforce myTrailhead has now released their next update in product filters. You can now create your own product filters that are relevant to your business…

    Salesforce Training, Salesforce Tutorial, Trailhead, Salesforce Learning, Business
    Stimulus Consulting Jan 20, 2021
    1,684  Views
    What is Validation Rule in Salesforce? Explain in details

    What is Validation Rule in Salesforce? Explain in details

    Video in Salesforce Admin

    Validation Rule will check the data entered by user during insert or update the operation and as per that it will actually take the action.…

    Salesforce Training, Salesforce Online Training, salesforce, Salesforce Video, Salesforce Learning
    CRS Apr 8, 2022
    1,422  Views
    What is Data Management in Salesforce Admin?

    What is Data Management in Salesforce Admin?

    Video in Salesforce Admin

    Data Loader is a tool to process bulk records and we can process five million records with the data loader.

    Salesforce Training, Salesforce Tutorial, Salesforce Admin, Salesforce Video, Salesforce Learning
    CRS May 20, 2022
    1,820  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.