Cannot show <datalist> with for statement

Phoenix Forum Questions / Help
,
1

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.

            <input
            name="home"
            value={@home}
            type="text"
            list = "homes"
            autocomplete="off"
            placeholder="Enter your address"
            />

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

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)}
    end

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

2

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

1 Like
3

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
4

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

1 Like
5

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>
Москва, Центральный федеральный округ, Россия
</datalist>
1 Like
6

It’s my guess too…

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

1 Like