Quiero obtener el texto seleccionado en el menú desplegable de búsqueda usando la función javascript. Mi salida esperada es mi texto seleccionado. Pero en el código siguiente, siempre devuelva el valor como indefinido. Hay otro problema con este menú desplegable. Cuando hago clic una vez en el menú desplegable, no muestra los elementos desplegables. Siempre, tengo que hacer doble clic para ver los elementos desplegables. Mi problema principal es cómo obtener el texto seleccionado usando la función js. Espero tu ayuda.
document.querySelector('#get-value').addEventListener('click', ()=> { var elmValue = document.querySelector('#suggestions').value; document.querySelector('#result').innerHTML = elmValue; })
<datalist id="suggestions"> <option>First Option</option> <option>Second Option</option> </datalist> <input class="form-control" autoComplete="on" list="suggestions" id="agentName"/> <button id="get-value"> Get Value </button> <p> Selected Value: <span id="result"></span> </p>
Gracias.
Encontré una solución para este problema. Incluí el atributo de nombre en el campo de entrada.
<input class="form-control" autoComplete="on" list="suggestions" id="agentName" name="agentName"/>
Luego, usando la línea de código a continuación, pude obtener el texto seleccionado.
var selectedValue = $('[name="agentName"]').val();