FREE SALESFORCE LWC COMPONENT

Search & Filter

Keep filtering explicit and debounce server-side search when it triggers expensive Apex queries.

Component structure

COMPONENTwcsSearchFilter

PLATFORMSalesforce Lightning Web Components

STARTERTemplate + JavaScript + CSS + Meta XML

HTML template

<template>
  <div class="toolbar">
    <lightning-input
      type="search"
      label="Search"
      value={query}
      onchange={handleSearch}>
    </lightning-input>
    <lightning-button label="Filter" onclick={handleFilter}></lightning-button>
  </div>
</template>

JavaScript

import { LightningElement } from 'lwc';

export default class WcsSearchFilter extends LightningElement {
  query = '';

  handleSearch(event) {
    this.query = event.target.value;
  }

  handleFilter() {
    this.dispatchEvent(new CustomEvent('filter'));
  }
}

CSS

.toolbar{display:flex;gap:.75rem;align-items:end;flex-wrap:wrap}.toolbar lightning-input{flex:1;min-width:220px}

Meta XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>64.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>