如何使用datalist创建自动完成

Question

我试图用datalist 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>

Answer 1

“...不知道名字...以及我如何获得这个值（id）。”

我不知道你的意思...也不知道它和自动完成有什么关系。

下面的演示将在#options上激发Change事件时运行回调函数getData()。控制台（不是警报，因为它令人恼火）将记录两项：

null

.autocomplete()不是JavaScript或jQuery的内置方法。您需要像Noyon先生评论的那样加载jQuery UI，或者加载一个插件。

另外，在加载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>