こんにちは、@yoheiMuneです。久しぶりのフロントエンドネタ。input要素についてautocomplete属性を使うと簡単に入力候補を表示することができます(最近初めて知りました)。それについてブログを書きたいと思います。目次Inputタグに対する入力補完inputタグには色々と要素がありますが、以下のように実装することで入力候補を表示することができます。value="原宿"&gt;&lt;/option&gt;&lt;/datalist&gt;ここでポイントとしては、autocomplete="on"で入力補完機能をONにすることと、list="mylist"を指定してどんな候補を出すのかを指定するというところです。入力候補は<datalist>タグを用いて指定します。こんなに簡単にできるとは知りませんでした(ほんの数日前まで)。JavaScriptでもやってみるもちろんJavaScriptからも動的に指定することができます。以下のように実装します。datalist.appendChild(option);});document.body.appendChild(datalist);JavaScriptからできれば動的にもできる(例えばLocalStorageに入力内容を入れておけば過去分も含めて入力補完ができる)ので、色々と便利そうです。use」で確認した限りでは、大体のブラウザで使えるようです。http://caniuse.com/#feat=input-autocomplete-onoff最後にjQueryなどを用いなくてもサクッとできるのは便利ですね。list指定のところでsetAttributeを使わなければ動かなかったのが少しハマりポイントでしたが、それ以外はいい感じに簡単に実装できました。最後になりますが本ブログでは、フロントエンド・Linux・Python・開発関連・Swift・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。ご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。Munesada)です。世の中をさらに便利に面白くをモットーにWeb界隈で活動しています。Now機械学習/AI/自然言語処理のホットな"今"をお届けするキュレーションメディアです。