Custom Lookup in LWC

In case you are in need of a custom lookup in LWC, it becomes tricky to implement.

We need to send a request including the search text that user is trying to perform the search with. Get the data and display it back.

Until here it's going to be fine, but the UI that we get to see when user picks one option and getting rid of the selected option when close icon is clicked. Figuring out these things can be a little bit painful.

This is what am I mean!

I tried building a search component which is basically a custom lookup in LWC and it searches across Account object, however, you can extend it to perform a search across any object. The results will be displayed in custom lookup search UI.

You will be able to remove the selected option and reselect another option and everything remain intact., fully in sync with the standard Lightning UI.

Let's jump into the code!

Here is the  template file.

This is going to be the JS file

And here is a little bit of custom CSS that we would need to keep things together.

Liked the post? Let me know what you think of it.

Interested in learning LWC Development with me? Subscribe to my course (use this if you are out of India).