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?

  • 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 Mar 24 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 Mar 24 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 Mar 24 at 17:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.