showing a list of results showed while user is writing something in search box

Question

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 code is this:

HTML:

<template>
    <div class="slds-text-heading_medium slds-text-color_inverse labelText "> some text center align  </div>
    <div class="slds-p-around_medium lgc-bg">
        <lightning-input
                id="Input_Id"
                type="search"
                label="Search"
                placeholder="search something"
                variant="label-hidden"
                onkeypress={handleEnter}>
        </lightning-input>
    </div>
</template>

JavaScript:

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
        }
    }; 
}

CSS:

.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.

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>
  </div>
</div>

css:

/* 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.