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

Question

看起来好像一些文本输入立即给了我一个“下拉列表”，它带有我过去填写的值。其他时间没有。有没有办法我可以“鼓励”这种行为在输入框？为什么有时会发生这种情况，有时候不会呢我是否需要为重复用户提供cookie或其他设备以确保他们具有此功能，或者是否存在一些jquery选项？ （因为我已经在使用它）。

Answer 1

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

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

Answer 2

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

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

这就是浏览器的行为。

对于jQuery的选项，你可以在http://jqueryui.com/autocomplete/

Answer 3

使用jQuery UI的自动完成这是一个想法。如果您想为页面上的每个输入字段具有特定的下拉值列表。然后用一个小小的javascript，google关闭编译器以及为浏览器创建收藏夹/书签的知识，您可以在任何网页上添加类似的东西。

这里是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，而j​​queryui意味着你可以使用自动完成功能。