Question

我正在尝试使用数据列表html创建自动填充功能，这是我的代码：

<input type="text" id="options" name="options" list="list_option">
<datalist id="list_option">
  <option value="1">Op1</option>
  <option value="2">Op2</option>
</datalist>
<input type="button" onclick="data($('#options').val());" value="getId">
<script>
function data(term){
alert(term);
}
</script>

列表显示正确，问题是，如果我从输入的数据列表中选择一个项目，则显示值，而不是名称... 以及如何获取此值（id）..请提出任何建议..谢谢

Answer 1

“ ...不要输入名称...，以及如何获取此值（id）。”

我不知道您的意思是什么...或它与自动完成功能之间的关系。

在getData()上触发change事件时，以下Demo将运行回调函数#options。控制台（因为令人讨厌而不会报警）将记录以下两项：

文本框值

在getID()上触发click事件时，运行回调函数:button。控制台将记录：

文本框ID
数据列表ID

对于自动完成行为，您只需将 autocomplete attribute 添加到文本框标记中即可，因为默认情况下该标记为打开状态。要测试它，只需输入一个字母。

.autocomplete()不是JavaScript或jQuery的内置方法。您需要按照Noyon先生的评论加载jQuery UI或加载plugin。

顺便说一句，在加载jQuery时，切勿使用onclick属性事件处理程序。这就像推汽车而不是开车。

演示

$('#options').on('change', getData);
$(':button').on('click', getID);

function getID(event) {
  var textID = $('#options')[0].id;
  var listID = $('#list')[0].id;
  console.log('Text Box ID: #' + textID);
  console.log('List ID: #' + listID);
}

function getData(event) {
  var val = this.value;
  console.log('Text Box Value: ' + val);
}

<input type="text" id="options" name="options" list="list" autocomplete>
<datalist id="list">
  <option value='wallet'>wallet</option>
  <option value='hair'>hair</option>
  <option value='coasters'>coasters</option>
  <option value='book'>book</option>
  <option value='clay pot'>clay pot</option>
  <option value='twezzers'>twezzers</option>
</datalist>

<input type='button' value='getID'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如何使用数据列表创建自动完成

1 个答案:

演示