Overview

LiveSelect is a dynamic selection field component for LiveView in Elixir. It allows users to create a search-like interface with type-ahead functionality. The dropdown menu is filled in real-time as the user types, and the component offers features such as single or multiple selection, customizable behavior, and styling options.

Features

• Dynamic dropdown: The dropdown menu is filled as the user types, allowing for search-like functionalities.
• Single or multiple selection: Users can choose to select only one option or multiple options from the dropdown.
• Configurable behavior: Users can configure the component’s behavior, such as setting the minimum number of characters that trigger an update or the maximum number of selectable options.
• Default styles for tailwindcss: LiveSelect provides default styles for tailwindcss, which can be fully customized or overridden if needed.
• Customizable HTML rendering: Users have the ability to customize the rendered HTML for dropdown entries and tags using slots.

Installation

To install LiveSelect, add it to your dependencies in your project’s mix.exs file:

defp deps do
  [
    {:live_select, "~> 0.1"}
  ]
end

LiveSelect also relies on Javascript hooks to work. Add LiveSelect’s hooks to your live socket in your app.js file:

import {socket} from "./socket"
import LiveSocket from "phoenix_live_view"

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: {
    LiveSelect: require("live_select")
  }
})

liveSocket.connect()

Summary

LiveSelect is a dynamic selection field component for LiveView in Elixir. It provides a convenient way to create search-like interfaces with type-ahead functionality. With options for single or multiple selection, configurable behavior, and customizable styling, LiveSelect offers flexibility for developers to create interactive interfaces in their LiveView applications.