LiveSelect

https://hexdocs.pm/live_select/1.7.5/
Admin
LiveSelect is a LiveView component that implements a dynamic selection field with a dropdown,...
Tokens:1,539
Snippets:18
Trust Score:9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Start LiveSelect Showcase App

Source: https://hexdocs.pm/live_select/1.7.5/readme.html

Run these commands in the cloned repository to start the showcase app locally. The app is available at http://localhost:4001.

```bash
mix setup
PORT=4001 mix phx.server
```

--------------------------------

### Add LiveSelect to Project Dependencies

Source: https://hexdocs.pm/live_select/1.7.5/readme.html

Add the LiveSelect hex package to your project's dependencies list.

```elixir
[
    {:live_select, "> 1.0"}
]
```

--------------------------------

### Handling LiveSelect Events in LiveView

Source: https://hexdocs.pm/live_select/1.7.5/readme.html

Implement handle_event callbacks in your LiveView or LiveComponent to process LiveSelect input and update options. The 'live_select_change' event fetches search results, and the 'change' event handles form submission.

```elixir
  @impl true
  def handle_event("live_select_change", %{"text" => text, "id" => live_select_id}, socket) do 
    cities = City.search(text)
    # cities = [ 
    # {"New York City", [-74.00597,40.71427]},
    # {"New Kingston", [-76.78319,18.00747]},
    # ... 
    # ]

    send_update(LiveSelect.Component, id: live_select_id, options: cities)
    
    {:noreply, socket}
  end

  @impl true
  def handle_event(
        "change",
        %{"my_form" => %{"city_search_text_input" => city_name, "city_search" => city_coords}},
        socket
      ) do
    IO.puts("You selected city #{city_name} located at: #{city_coords}")

    {:noreply, socket}
  end
```

--------------------------------

### Add LiveSelect to NPM Dependencies

Source: https://hexdocs.pm/live_select/1.7.5/readme.html

When using an NPM-based builder like Webpack, add LiveSelect to your `package.json` dependencies. Ensure to adjust the path for umbrella apps.

```json
{
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view",
    "live_select":  "file:../deps/live_select" // <-- add this line, and add an extra "../" if you're in an umbrella app
  }
}
```

--------------------------------

### Tailwind CSS Configuration for LiveSelect (v3)

Source: https://hexdocs.pm/live_select/1.7.5/readme.html

Add this to your tailwind.config.js 'content' section when using tailwind or daisyui styles with LiveSelect v3. Paths differ for standalone vs. umbrella apps.

```javascript
module.exports = {
    content: [
        //...
        '../deps/live_select/lib/live_select/component.*ex', // <-- for a standalone app
        '../../../deps/live_select/lib/live_select/component.*ex' // <-- for an umbrella app
    ]
    //..
}
```

--------------------------------

### Integrate LiveSelect Javascript Hooks

Source: https://hexdocs.pm/live_select/1.7.5/readme.html

Include the LiveSelect Javascript hooks in your `app.js` file. This is necessary for LiveSelect's functionality.

```javascript
import live_select from "live_select"

// if you don't have any other hooks:
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: live_select})

// if you have other hooks:
const hooks = {
    MyHook: {
        // ...
    },
    ...live_select
}
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks})
```

--------------------------------

### Tailwind CSS Configuration for LiveSelect (v4+)

Source: https://hexdocs.pm/live_select/1.7.5/readme.html

Add this @source directive to your app.css file if using tailwind v4+ without a tailwind.config.js. Paths differ for standalone vs. umbrella apps.

```css
@source "../../deps/live_select/lib/live_select/component.*ex" /* for a standalone app */
@source "../../../../deps/live_select/lib/live_select/component.*ex" /* for an umbrella app */
```

--------------------------------

### LiveSelect Usage in Template

Source: https://hexdocs.pm/live_select/1.7.5/readme.html

Include LiveSelect in your form template. If the form is within a LiveComponent, ensure phx-target is set to @myself.

```heex
  <.form for={@form} phx-change="change">
    <.live_select field={@form[:city_search]} /> 
  </.form>
```

```heex
  <.live_select field={@form[:city_search]} phx-target={@myself} />
```
Tokens:
Raw