I'm trying to create a search box where the user write something, and while he do that a listbox with all the matching results appears (like in the figure below) (!! I'm asking only how to show the list with results while the user is typing in the searchbox, not wich results to show)

my desired result

My code is this:


    <div class="slds-text-heading_medium slds-text-color_inverse labelText "> some text center align  </div>
    <div class="slds-p-around_medium lgc-bg">
                placeholder="search something"


import {LightningElement} from 'lwc';

export default class SearchBar extends LightningElement {

        onEvent(event) {
        if (event.key === "Enter") {
            // Code runs when event is received --> show grouped listbox


.lgc-bg {
    background-color: green;
    text-align: center;
.labelText {
    background-color: green;
    text-align: center;
    padding-top: 0.5cm;

i tried to see if i could use the grouped options showed here: grouped options but i don't understend how to show the listbox while the user is typing.

  • were you able to get this working?
    – glls
    Jul 10, 2022 at 3:07
  • nope, i'm not, i'm still trying
    – MashaMasha
    Jul 11, 2022 at 13:09
  • the bellow code sample alongside implementation should be pretty straightforward - any issues you are facing?
    – glls
    Jul 11, 2022 at 15:28

1 Answer 1


if you look at the example of creating dropdowns from W3schools, you should be able to implement the same using a simple css rule that is toggled when the user is typing in the searchbox.

what happens then is completely up to you as well, ex, lose focus, toggle the css class, or when an element is clicked from the dropdown, toggle the css class again, to hide after selection.

this is your dropdown (populate dynamically with whatever:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>


/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;

instead of , you can add an onchange, or any event handler of your choice to toggle the hidden attribute, or css class that will make the dropdown-content hidden.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .