Cannot show <datalist> with for statement

Hello! I`m trying to implement a simple autocomplete with input and datalist HTML tags. And something strange is going on here: I cannot see datalist options on the page.

            list = "homes"
            placeholder="Enter your address"

      <datalist id="homes">
        <%= for place <- @homes do %>
          <option value={place.title}><%= place.title %></option>
        <% end %>

And this is handled by:

    def handle_event("suggest", %{"home" => home}, socket) do
      homes = Locations.get_locations(home)
      {:noreply, assign(socket,  homes: homes, home: home)}

homes variable is changing and fetching all I need, but it just does not show by datalist.

You need to wrap the input in a form, with phx-change…

1 Like

oh, just forgot to paste this part - I have fom:

        <.form let={k} for={@changeset} phx-change="suggest" phx-target={@myself} phx-submit="change_home">

1 Like

It looks ok, You could inspect the resulting html source code and see if datalist is present.

1 Like

Well is in here. But still can’t see it on the page. My guess it is because of some TailwindCSS issue. And in browser`s inspector:

<input name="home" value="Moscow" type="text" list="homes" autocomplete="off" placeholder="Enter your address">
<datalist id="homes>
Москва, Центральный федеральный округ, Россия
1 Like

It’s my guess too…

But it should be easy to test, by trying not to import css.

1 Like