テキストボックスの入力補完をする

テキストボックス(input type="text")にメールアドレス等を毎回入力するのは面倒なので入力補完をする方法を調べた。

[ブラウザの補完機能を使う]
フォームの自動入力 - Chrome ヘルプ
これが一番簡単な気がする。
ただ、Chromeでは補完されたりされなかったり、イマイチ挙動が把握出来ていない。

[ブラウザの拡張機能を使う]
多分いろんなextensionが出ていると思うけど、今回は未調査。

[HTML5のlistとdatalistを使う]
<input autocomplete>－HTML5タグリファレンス
HTML datalist Tag
古いブラウザでは使えない。Chrome20, IE10, FireFox4, Opera9, Safariは未サポート?

activeのINPUT text要素に補完リストを追加するbookmarklet
datalistのidが元ソースと競合しないように注意する必要がある。

javascript: (function (id, list) {
    var activeElement = document.activeElement;
    if (activeElement.tagName != "INPUT" || activeElement.type != "text")
        return;

    var datalist = document.getElementById(id);

    if (!datalist) {
        datalist = document.createElement("DATALIST");
        datalist.id = id;
        for (i = 0; i < list.length; i++) {
            var option = document.createElement("OPTION");
            option.value = list[i];
            datalist.appendChild(option);
        }
        activeElement.appendChild(datalist);
    }

    if (datalist.tagName != "DATALIST")
        return;

    activeElement.setAttribute("list", id);
})("myDatalist032984032", ["hoge", "fuga"]);

[jQueryを使う]
javascript jQuery 入力補完の実装
jQuery UI - オートコンプリート - jQuery 入門

jQueryとjQueryUIを読み込んでactiveElementに.autocompleteで補完リストを追加するbookmarklet。
jQueryとは別にjQueryUIの読み込みが必要な事に気が付かないで苦労した。
元々jQueryが読み込まれているページの場合は再読み込みはせずにそれを使う。
想定しているバージョンと異なる可能性あるので注意が必要。

javascript; (function (bml) {
    var d = document;
    var doBml = function () {
        bml(jQuery);
    };
    var loadScript = function (url, f) {
        console.log(url);
        var s = d.createElement("script");
        s.src = url;
        s.onload = f;
        d.body.appendChild(s);
    };
    var loadjQueryUi = function () {
        loadScript("//code.jquery.com/ui/1.10.4/jquery-ui.js", doBml);
    };
    
    if (typeof jQuery == "undefined") {
        loadScript("//code.jquery.com/jquery-2.0.3.js", loadjQueryUi);
    } else if (typeof jQuery.ui == "undefined") {
        loadjQueryUi();
    } else {
        doBml();
    }
})(function ($) {
    console.log($().jquery, $.ui.version, document.activeElement);
    $(document.activeElement).autocomplete({source: ["hoge","fuga"]});
});

[Javascripのライブラリを使う]
suggest.js - 入力補完ライブラリ

[おまけ]
focousがある要素はJavaScriptでは"document.activeElement"で取れる。
javascript - How do I find out which DOM element has the focus? - Stack Overflow

Chromeのbookmark barはCtrl+Shift+Bで表示をトグル出来る。