0

I have a LWC with a lightning-combobox whose options are populated via an apex query of records. The record list changes depending on the user accessing the LWC. There is one user for whom the query returns 400+ records, which causes the page to take a long time to render.

I'd like to refactor the LWC to not populate the options on page load, but rather allow the user to enter text into an input, have JS filter the returned records from apex based on the input and give them a autosuggest list consisting of the filtered records (similar in experience to html input type="search"). I haven't found any great examples to pull from cursory googling. Before I go into building this from scratch, I figured I'd ask here if anyone has any helpful examples to point to?

Improve this question
4
  • I am guessing you are looking for a typeahead functionality. There are a lot of examples online. sfdcpanther.com/custom-reusable-lookup-in-lwc Demo: youtube.com/watch?v=5DiFYYfXZlo
    – manjit5190
    Commented Mar 24, 2021 at 16:12
  • I'd strongly recommend that the filtering be done server-side, not in JS, so you only get back the data you need given the user's input. It's also common to require entry of 2 or even three characters before you start requesting matches.
    – Phil W
    Commented Mar 24, 2021 at 17:07
  • BTW, assuming the data doesn't change quickly, you should consider allowing the Apex you invoke to be cached, so if the user types the same set of letters in a short time interval this will avoid a server round-trip. Good for handling typing scenarios like "a", "b", "d", delete. Here you may already have results for "ab", so these are displayed after the user deletes the "d" in "abd" without a server round trip. You'll also want to have a delay before actually invoking the Apex (wire or imperative) during typing (as most examples you'll find already show).
    – Phil W
    Commented Mar 24, 2021 at 17:24
  • Any feedback on this plz?
    – user110654
    Commented Sep 4, 2022 at 15:41

0

Reset to default

You must log in to answer this question.