1

当从由 a 填充的自动完成列表中选择一个选项（例如，香蕉）时datalist，所选选项（香蕉）会按预期输入到文本框中，但自动完成列表仍会显示，如附图所示。 在此处输入图像描述

相反，如果事件由phx-submit(而不是phx-change,phx-keyup或phx-keydown) 绑定，则列表会按预期消失。不幸的是，我不能使用phx-submit，因为自动完成列表应该在输入时更新。

It appears that when an option is selected, and LiveView finishes handling phx-change and updates the page, it re-activates the autocomplete menu. 如何避免这种情况并在选择选项时使选项列表消失？

<form phx-change="username_change2">

  <input  id="username2"
        type="text"
        name="username2"
        placeholder="Enter your name"
        autofocus
        autocomplete="off"
        list="usernames"
        value ={@username}>
</form>

<datalist id="usernames">
  <%= for username <- (["apple","banana","cherry", "peach"]) do %>
    <option value= { username }><%= username %></option>
  <% end %>
</datalist>


def handle_event("username_change2", %{"username2" => kwd}, socket) do
  IO.inspect(kwd, label: "username changed2")
  socket1 = assign(socket, username1: kwd, username: kwd)

  {:noreply, socket1}
end
4

0 回答 0