[JavaScript] オートコンプリート付のテキストボックスを生成する

投稿日：2018年3月20日更新日：2018年5月2日

オートコンプリート付のテキストボックスを生成するサンプルです。

サンプルソース

例）オートコンプリート付のテキストボックスを生成する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
<script>
window.onload=function(){
  //オートコンプリートに設定する値
  var arr = [
    {value:"001"},
    {value:"002"},
    {value:"003"},
    {value:"101"},
    {value:"102"},
    {value:"103"}
  ];
 
  //オートコンプリート値を設定する
  for(var i=0;i<arr.length;i++){
    let op = document.createElement("option");
    op.value = arr[i].value;
    document.getElementById("dt1").appendChild(op);
  }
};
</script>
</head>
<body>
  <input type="text" autocomplete="on" list="dt1">
  <datalist id="dt1"></datalist>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sample</title>

window.onload=function(){

//オートコンプリートに設定する値

var arr = [

{value:"001"},

{value:"002"},

{value:"003"},

{value:"101"},

{value:"102"},

{value:"103"}

];

//オートコンプリート値を設定する

for(var i=0;i<arr.length;i++){

let op = document.createElement("option");

op.value = arr[i].value;

document.getElementById("dt1").appendChild(op);

}

};

</script>

</head>

<body>

</body>

</html>

実行サンプル

下のテキストボックスはオートコンプリートが設定されています。

解説

テキストボックスにautocomplete="on"を設定すると、オートコンプリートを有効にできます。
値は、list要素で設定できます。

執筆者：とら