0

一部のテキスト入力では、過去に入力した値を含む一種の「ドロップダウン」がすぐに表示されるようです。それ以外の場合はありません。入力ボックスでこの動作を「奨励」する方法はありますか? これが起こるときと起こらないときがあるのはなぜですか？この機能を確実に利用できるようにするために、リピーター ユーザーに Cookie やその他のデバイスを提供する必要がありますか、それとも jquery オプションはありますか? （私はすでにそれを使用しているため）。

4

3 に答える 3

1

ここにアイデアがあります。ページの各入力フィールドにプルダウン値の特定のリストが必要な場合。次に、少しの JavaScript、Google クロージャ コンパイラ、およびブラウザのお気に入り/ブックマークを作成する知識があれば、任意の Web ページに同様のものを追加できます。

これがjsfiddleの私のコード例です

HTML

<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" list="sitelist" />
<datalist id="sitelist">
    <option label="Lorem" value="Lorem">
    <option label="Ipsum" value="Ipsum">
    <option label="Dolor" value="Dolor">
</datalist>

Javascript

(function () {
    var d = "proin vestibulum ipsum vel tortor sollicitudin luctus".split(" "),
        l = document.createElement("datalist");

    l.id = "myDynamicDatalist";
    d.forEach(function (w) {
        var o = document.createElement("option");
        o.label = w;
        o.value = w;
        l.appendChild(o);
    });

    document.body.appendChild(l);

    Array.prototype.forEach.call(document.getElementsByTagName("input"), function (e) {
        if (e.list === null || e.list === "") {
            e.setAttribute("list", l.id);
        }
    });
}());

Google のクロージャ コンパイラを使用すると、オプションを「シンプル」に設定するだけで、すべての空白を取り除き、1 行のテキストに短縮できます。

(function(){var b=document.createElement("datalist");b.id="myDynamicDatalist";"proin vestibulum ipsum vel tortor sollicitudin luctus".split(" ").forEach(function(a){var c=document.createElement("option");c.label=a;c.value=a;b.appendChild(c)});document.body.appendChild(b);Array.prototype.forEach.call(document.getElementsByTagName("input"),function(a){(null===a.list||""===a.list)&&a.setAttribute("list",b.id)})})();

その行の先頭にjavascript:追加してお気に入り/ブックマークとして保存すると、JavaScriptのブックマークレットが作成されます。

試してごらん。SO でお気に入り/ブックマークをクリックしてから、検索ボックスをダブルクリックしてください。

jquery と jqueryui を使用してブックマークレットを作成することもできます。これは、オートコンプリートを使用できることを意味します。

于 2013-04-29T18:52:32.630 に答える