es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Autocompletar utilizando un datalist no funciona correctamente con phx-change.

01 Aug, 2023 Programación

Cuando se selecciona una opción (por ejemplo, banana) de la lista de autocompletado generada por un datalist, la opción seleccionada (banana) se ingresa en el cuadro de texto como se esperaba, pero la lista de autocompletado todavía se muestra como se muestra en la imagen adjunta.

Imagen

En cambio, la lista desaparece como se espera si el evento está enlazado con phx-submit (en lugar de phx-change, phx-keyup o phx-keydown). Desafortunadamente, no puedo usar phx-submit porque la lista de autocompletado debe actualizarse a medida que se ingresa el texto.

Parece que cuando se selecciona una opción y LiveView termina de manejar phx-change y actualiza la página, se vuelve a activar el menú de autocompletado. ¿Cómo puedo evitar esto y hacer que la lista de opciones desaparezca cuando se selecciona una opción?

<form phx-change="username_change2">

  <input id="username2" type="text" name="username2" placeholder="Ingresa tu nombre" 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
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema parece ser que LiveView se vuelve a renderizar después del evento phx-change, lo que vuelve a activar la lista de autocompletado. Una solución para evitar esto es actualizar manualmente el campo de entrada y ocultar la lista de autocompletado usando JavaScript una vez que se selecciona una opción.

    Puede agregar un event listener al campo de entrada para que se active cuando se selecciona una opción de la lista de autocompletado. Dentro de la función del event listener, puede establecer el valor del campo de entrada en la opción seleccionada y ocultar la lista de autocompletado usando la propiedad de visualización de CSS o eliminando el elemento datalist.

    Aquí tienes un ejemplo de cómo puedes modificar tu código para lograr esto:

    <form phx-change="username_change2">
  <input id="username2" type="text" name="username2" placeholder="Ingresa tu nombre" 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>

<script>
  const inputField = document.getElementById('username2');
  const datalist = document.getElementById('usernames');

  inputField.addEventListener('input', (event) => {
    const inputValue = event.target.value;
    const option = datalist.querySelector(`option[value='${inputValue}']`);

    if (option) {
      inputField.value = option.value;
      // Establece la propiedad de visualización del datalist como 'none' para ocultarlo
      datalist.style.display = 'none';
      // Alternativamente, puedes eliminar el elemento datalist del DOM
      // datalist.remove();
    }
  });
</script>

    Con este código, la lista de autocompletado desaparecerá una vez que se seleccione una opción de la lista. Puedes ajustar el CSS o el método de ocultar la lista para adaptarlo a tus necesidades específicas.

Comments are closed.