Question

似乎有些文字输入会立即给我一种“下拉”，其中包含我过去填写的值。其他时候没有。有没有办法在输入框中“鼓励”这种行为？为什么这有时会发生，有时不会发生？我是否需要向重复用户提供cookie或其他设备以确保他们具有此功能，或者是否有一些jquery选项？（因为我已经在使用它了。）

Answer 1

这是一个想法。如果要为页面上的每个输入字段指定一个特定的下拉值列表。然后使用一些javascript，googles闭包编译器以及为您的浏览器创建收藏夹/书签的知识，您可以在任何网页上添加类似的东西。

以下是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's closure compiler，您可以通过将选项设置为“简单”来摆脱所有空白并将内容缩短为单行文本，并最终得到此结果。

(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 bookmarklet。

试一试。点击你最喜欢的/书签在SO，然后双击搜索框，瞧！。

您甚至可以使用jquery创建bookmarklet，jqueryui意味着您可以使用自动完成功能。

Answer 2

这是一项依赖于浏览器的功能。浏览器可能会查看文本输入字段的ID和/或名称，并保存您输入的值。

由于您访问的网站上使用的输入字段的ID /名称，它可能不稳定。

Answer 3

浏览器根据输入类型和名称为您提供过去的填充值。

因此当有人在examplea.com中使用名为“login”的输入编码表单时，当您继续使用exampleb.com并且还有一个名为“login”的输入时，浏览器将检测到该表单并且您已经有了一些信息之前填写了一个名为“login”的输入，并显示了一些选项。

这就是浏览器行为。

对于jQuery选项，您可以在http://jqueryui.com/autocomplete/使用jQuery UI的自动填充

如何使文本输入始终自动完成

3 个答案: