2016/11/18更新

[HTML5] autocomplete属性を用いた入力補完を実装する

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
久しぶりのフロントエンドネタ。input要素についてautocomplete属性を使うと簡単に入力候補を表示することができます(最近初めて知りました)。それについてブログを書きたいと思います。

画像

目次




Inputタグに対する入力補完

inputタグには色々と要素がありますが、以下のように実装することで入力候補を表示することができます。

実行例


ソースコード

<input type="text" autocomplete="on" list="mylist">
<datalist id="mylist">
    <option value="渋谷"></option>
    <option value="新宿"></option>
    <option value="新橋"></option>
    <option value="新大阪"></option>
    <option value="原宿"></option>
</datalist>
ここでポイントとしては、autocomplete="on"で入力補完機能をONにすることと、list="mylist"を指定してどんな候補を出すのかを指定するというところです。そして入力候補は<datalist>タグを用いて指定します。
こんなに簡単にできるとは知りませんでした(ほんの数日前まで)。便利な機能です。



JavaScriptでもやってみる

もちろんJavaScriptからも動的に指定することができます。以下のように実装します。
// inputを作成
var input = document.createElement('input');
input.autocomplete = true;
input.setAttribute('list', 'my-friends');
document.body.appendChild(input);

// 候補を作成
var datalist = document.createElement('datalist');
datalist.id = 'my-friends';
var names = ['梅木', '水野', '板橋', '小林'];
names.forEach(function(name) {
    var option = document.createElement('option');
    option.value = name;
    datalist.appendChild(option);
});
document.body.appendChild(datalist);
JavaScriptからできれば動的にもできる(例えばLocalStorageに入力内容を入れておけば過去分も含めて入力補完ができる)ので、色々と便利そうです。



サポート状況

「Can i use」で確認した限りでは、大体のブラウザで使えるようです。
画像 http://caniuse.com/#feat=input-autocomplete-onoff



最後に

jQueryなどを用いなくてもサクッとできるのは便利ですね。list指定のところでsetAttributeを使わなければ動かなかったのが少しハマりポイントでしたが、それ以外はいい感じに簡単に実装できました。

最後になりますが本ブログでは、フロントエンド・Linux・Python・開発関連・Swift・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。