如何控制输入自动填充列表

Question

如何在输入自动填充列表中添加/删除预测？ 像这样：

<input id="myInput">

...

const predicts = document.getElementById('myInput').predicts;
console.log(predicts); // => ['one', 'two'] - get autofill predicts
document.getElementById('myInput').predicts.push('new-predict'); // add new 'new-predict' to autofill
document.getElementById('myInput').predicts.remove(1); // remove second predict from autofill    

重要：我不想使用像jQuery自动完成这样的外部库。我想控制原生行为。

Answer 1

查看规范：https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

用户代理有时具有帮助用户填写表单的功能，例如根据较早的用户输入预填充用户的地址。自动填充内容属性可用于向用户代理提示如何或实际上是否提供此类功能。

所以本机行为是使用早期用户输入来构建自动填充术语列表，而不是让你控制它：让任何网站访问用户输入历史记录存在巨大的安全隐患（即：考虑随机任何随机脚本）网页读取名为username或password等字段的输入历史记录......）。

如果你不喜欢使用datalist等其他原生功能，也不想使用javascript（jquery或你自己的）复制自动完成功能，我认为你唯一的选择就是采用这样的黑色黑客技术（在black hack USA 2010 http://www.slideshare.net/jeremiahgrossman/breaking-browsers-hacking-autocomplete-blackhat-usa-2010/22）填写输入历史记录（参见http://blog.jeremiahgrossman.com/2010/07/in-firefox-we-cant-read-auto-complete.html）：

function fillAutoComp() {

// random data, nothing important
var num = Math.floor(Math.random()*1000000);

// set some arbitrary data to the text field
document.getElementById('data').value = “Spoof-” + num;

// submit the form, over and over and over again
setTimeout("document.getElementById('me').submit(); fillAutoComp();",2);
}

我最后的2美分是为了避免这些黑客攻击并使用本机自动完成属性的众多替代方案之一

Answer 2

试试这个;）

在这种情况下，您可以使用datalist;有了这个，您会看到添加到datalist option的项目，您可以从此处选择选项;

您可以添加autocomplete="true"以指示浏览器显示是否有任何预填充数据;

开始输入，它会显示选项;

＆＃13;

＆＃13;

<input type="text" list="predicts" autocomplete="true" />
<datalist id="predicts">
  <option>Predict 1</option>
  <option>Predict 2</option>
  <option>Predict 3</option>
  <option>Predict 4</option>
  <option>Predict N</option>
</datalist>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用jquery自动完成插件

https://jqueryui.com/autocomplete/

如果您正在使用某些服务器端代码，请尝试此链接

http://tutsforweb.blogspot.in/2012/05/auto-complete-text-box-with-php-jquery.html

希望它可以帮到你