jQuery Select嵌套在DataList标签中 - 无法获取所选项目答案

【问题标题】：jQuery Select nested in DataList tag - can't get the selected itemjQuery Select嵌套在DataList标签中 - 无法获取所选项目
【发布时间】：2017-03-03 00:04:16
【问题描述】：

我正在尝试为 Input 标签实现自动完成功能。

当我开始输入时，我会看到下拉菜单，然后我选择其中一项。当我尝试访问所选项目时，我只是从选项列表中获得第一个选项，而不是我选择的那个。

这就是它的样子：

<input id="chosenTxt" list="someList">
  <datalist id="someList">
    <select id="selectList">
       <option value="First" label="one" />
       <option value="Second" label="two" />
       <option value="Third" label="three" />
    </select>
  </datalist>
</input>

然后例如我选择“第二”并使用

$("#selectList option:selected").attr("label")

我得到“一”。

仅供参考：我知道这是内置在 jQuery UI 中的，但我不想使用它。

【问题讨论】：

如果你不使用 jqueryUI 的自动完成，你会使用自动完成吗？
我已经实现的一个
哪一个，因为那样我们就知道如何回答你的问题了，或者你能做一个小提琴吗？
基本上，我有一个页面加载时创建的所有项目的列表，然后我向 KeyUp 添加一个函数，该函数采用当前输入值，过滤列表以仅选择包含潜文本的项目，并动态生成

标签： javascript jquery html select autocomplete

【解决方案1】：

您需要监听输入元素上的input 事件并迭代选项，检查输入 value 是否等于选项之一的 value。

您可以从 datalist 上的 options 属性访问 datalist 元素的选项。

这是一个例子。

$('#chosenTxt').on('input', function() {
  $that = $(this);
  $.each($('#someList')[0].options, function(idx, opt) {
    if($that.val() == opt.value) {
      console.log(opt.label)
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="chosenTxt" list="someList">
<datalist id="someList">
<select id="selectList">
  <option value="First" label="one" />
  <option value="Second" label="two" />
  <option value="Third" label="three" />
</select>
</datalist>

【讨论】：

那行不通。如果我有 2 个相同的值，但标签不同，我每次都会得到第一个