如何使用JS获取可搜索下拉框选中文本 解决取值undefined与点击不展开问题

取值返回undefined问题修复 #

取值对象错误：<datalist>元素本身没有value属性，选中值实际存储在和datalist绑定的<input>节点上，你之前选取#suggestions（datalist节点）取值自然会返回undefined。
修正方案为从id为agentName的input元素取值即可。

单击无法唤起下拉选项问题修复 #

原生datalist默认交互规则为：输入框为空时单击不会弹出选项列表，需要双击或输入内容才会触发展示。
修正方案为给input绑定单击事件，调用showPicker()方法主动唤起选项列表。 #

完整修正后代码 #

JS代码

// 获取选中值逻辑
document.querySelector('#get-value').addEventListener('click', ()=> {
  const elmValue = document.querySelector('#agentName').value;
  document.querySelector('#result').textContent = elmValue;
})

// 单击唤起下拉列表逻辑
document.querySelector('#agentName').addEventListener('click', function() {
  this.showPicker();
})

HTML代码（无需修改，和原代码一致）

<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>

内容的提问来源于stack exchange，提问作者Dulani Maheshi