似乎某些文本输入会立即给我一种“下拉菜单”,其中包含我过去填写的值。其他时候没有。有没有办法可以在输入框中“鼓励”这种行为?为什么有时会发生有时不会?我是否需要为重复用户提供 cookie 或其他设备以确保他们具有此功能,或者是否有一些 jquery 选项?(因为我已经在使用它了)。
3 回答
这是一个想法。如果您想为页面上的每个输入字段提供特定的下拉值列表。然后使用一点 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 的闭包编译器,您只需将选项设置为“简单”,就可以摆脱所有空格并将内容缩短为单行文本,您最终会得到这个。
(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 意味着您可以使用它们的自动完成功能。
这是一个依赖于浏览器的功能。浏览器可能会查看文本输入字段的 ID 和/或名称并保存您输入的值。
由于您访问的网站上使用的输入字段的 ID/名称,它可能参差不齐。
浏览器会根据输入类型和名称为您提供过去填充的值。
因此,当有人在 examplea.com 中使用名为“login”的输入编写表单时,当您继续在 exampleb.com 上输入名为“login”的输入时,浏览器会检测到这一点,并且您已经为一个填写了一些信息之前输入名为“login”并显示一些选项。
这就是浏览器的行为。
对于 jQuery 选项,您可以在http://jqueryui.com/autocomplete/使用 jQuery UI 的自动完成功能