Question

我想为输入标签实现自动完成功能。

当我开始输入时，我会得到下拉列表，然后选择其中一项。当我想要到达所选项目时，我只是从选项列表而不是我选择的那个中获得第一个选项。

这就是它的样子：

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

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

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

我得到“一个”。

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

Answer 1

您需要在input元素上侦听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>

jQuery Select嵌套在DataList标记中 - 无法获取所选项

1 个答案: