0

Como puedo desplegar esta lista mediante jquery?

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

2

1 respuesta 1

0

Vale, es un poco complicado ya que un input list no esta diseñado para hacer de dropdown, ya que solo es un input de auto completado y no es necesario este evento, mas sin embargo podrías utilizar la siguiente lógica:

Dentro de un $(document).ready() puedes hacer que este campo se seleccione automáticamente de la siguiente manera:

$(document).ready(function(){

     setTimeout(function(){
     
      $("#list").focus();
 
      $("#browsers").mousedown();
     
     }, 1000);

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="list" list="browsers">

    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist>

Esto crea un evento click en el input al cargar la pagina y así se selecciona automáticamente, pero este sigue siendo seleccionado para desplegarse, sin embargo espero que te haya sido de ayuda!

5
  • Hola, seguro que estoy haciendo algo mal, pero a mi no me ha funcionado. Lo podrías poner en un ejemplo verificable? Gracias el 5 oct. 2018 a las 22:03
  • Que navegador estas usando? el 5 oct. 2018 a las 23:37
  • 2
    En chrome 69.0.3497.100 no funciona el 6 oct. 2018 a las 4:28
  • 1
    Efectivamente: A partir de la versión 53+, Google Chrome no realizará una acción predeterminada para eventos no confiables. Tales como eventos creados o modificados por script, o enviados a través del método dispatchEvent. chromestatus.com/features/5718803933560832 chromestatus.com/features/6461137440735232 el 6 oct. 2018 a las 12:08
  • 1
    Mas allá de esto, creo que no existe una solución factible para "programaticamente" desplegar un elemento list o un select puesto a que no es visto como algo necesario, como alternativa, puedes crear tu propio menú desplegable con un input y unos cuantos elementos de lista, de tal manera que los programes para que funcione como un list, efectuando autocompletado y de mas, si te interesa esto, siempre puedes comentarlo y tratare de publicar una respuesta para ello. Para ayudarte Lorenzo, saludos. el 6 oct. 2018 a las 12:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.