LWC (Lightning Web Components) is a framework provided by Salesforce for building web applications on the Salesforce platform. It allows developers to build components using modern web standards such as JavaScript and HTML. Here are a few search code examples using LWC, along with some details:
1. Search for Records:
This example demonstrates how to perform a search for records in Salesforce using LWC and the Apex controller.
<template>
<lightning-input label="Search" value={searchTerm} onchange={handleSearch}></lightning-input>
<ul>
<template for:each={searchResults} for:item="result">
<li key={result.Id}>{result.Name}</li>
</template>
</ul>
</template>
JavaScript (LWC Controller):
import { LightningElement, wire } from 'lwc';
import searchRecords from '@salesforce/apex/SearchController.searchRecords';
export default class SearchComponent extends LightningElement {
searchTerm = '';
searchResults = [];
handleSearch(event) {
this.searchTerm = event.target.value;
}
@wire(searchRecords, { searchTerm: '$searchTerm' })
wiredSearchResults({ error, data }) {
if (data) {
this.searchResults = data;
} else if (error) {
// Handle error
}
}
}
Apex Controller (SearchController):
public with sharing class SearchController {
@AuraEnabled(cacheable=true)
public static List<Account> searchRecords(String searchTerm) {
// Perform search logic
// Example: return [SELECT Id, Name FROM Account WHERE Name LIKE :searchTerm LIMIT 10];
}
}
In this example, the user can enter a search term in the input field, and the component calls the Apex controller method searchRecords with the entered search term as a parameter. The Apex method performs the search query and returns the results to the LWC component, which then displays the results in a list.
2. Real-Time Search:
This example demonstrates how to implement real-time search functionality, where the search results update as the user types.
<template>
<lightning-input label="Search" value={searchTerm} onchange={handleSearch}></lightning-input>
<ul>
<template for:each={searchResults} for:item="result">
<li key={result.Id}>{result.Name}</li>
</template>
</ul>
</template>
JavaScript (LWC Controller):
import { LightningElement, wire } from 'lwc';
import searchRecords from '@salesforce/apex/SearchController.searchRecords';
export default class SearchComponent extends LightningElement {
searchTerm = '';
searchResults = [];
handleSearch(event) {
this.searchTerm = event.target.value;
searchRecords({ searchTerm: this.searchTerm })
.then((result) => {
this.searchResults = result;
})
.catch((error) => {
// Handle error
});
}
}
Apex Controller (SearchController):
public with sharing class SearchController {
@AuraEnabled(cacheable=true)
public static List<Account> searchRecords(String searchTerm) {
// Perform search logic
// Example: return [SELECT Id, Name FROM Account WHERE Name LIKE :searchTerm LIMIT 10];
}
}
In this example, the handleSearch method is called whenever the value of the search input changes. It makes anasynchronous call to the Apex controller method `searchRecords` with the current search term. The Apex method performs the search query and returns the results, which are then assigned to the searchResults variable in the LWC component, updating the displayed results in real-time.
These are just a couple of examples demonstrating how to implement search functionality using LWC. You can customize the search logic in the Apex controller based on your specific requirements and data model.