Select List

A Web Component to create a list with selectable items. Combine it an input element to create a search results UI.

Demo

Take a look at the browser console. When you select an item, an event listener will log it.

Code 
<input type="search" class="form-control mb-3" id="myinput" />

<bl-select-list class="list-group" id="myselectlist" for="myinput">
    <button class="list-group-item list-group-item-action">Item 1</button>
    <button class="list-group-item list-group-item-action">Item 2</button>
    <button class="list-group-item list-group-item-action">Item 3</button>
</bl-select-list>

<script>
    document.getElementById("myselectlist").addEventListener("bl-select", ({ detail }) => {
        console.log("Selected: ", detail)
    })
</script>

Together with popover and CSS Anchoring, it’s also useful to create a dropdown list.

Code 
<button
    type="button"
    class="blue-anchor blue-menu-item btn"
    id="anchor-1"
    popovertarget="popover-1"
    style="--blue-anchor-name: --anchor-1"
>
    <span class="blue-menu-item-label">Parent</span>
</button>

<bl-select-list
    id="popover-1"
    for="anchor-1"
    popover
    class="blue-anchored blue-anchored-start blue-anchored-fallback blue-menu-item-dropdown text-body"
    style="--blue-anchor-name: --anchor-1; --blue-menu-item-dropdown-bg: var(--bs-body-bg);"
>
    <button type="button" class="blue-menu-item btn">
        <span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
        <span class="blue-menu-item-label">Child</span>
    </button>
    <button type="button" class="blue-menu-item btn">
        <span class="blue-menu-item-icon" aria-hidden="true">🌑</span>
        <span class="blue-menu-item-label">Child 2</span>
    </button>
</bl-select-list>

Grab the code

When you don't use the entire Blue Web library, you can also just copy and paste the required code into your own project.

  1. Copy and paste the following code into your project. Source: @/src/js/select-list.ts
Edit post on GitHub