HTML DOM Input Search autocomplete 属性
HTML DOM Input Search autocomplete 属性与 type=”search” 的 <input> 元素的 autocomplete 属性关联。autocomplete 属性的值为 “on” 或 “off”。on 值指定 Web 浏览器必须根据先前的输入自动完成用户文本，false 则表示否则。
语法
以下是语法 −
设置 autocomplete 属性 −
searchObject.autocomplete = "on|off"
此处，on 表示 Web 浏览器将根据先前的输入自动完成用户输入，false 表示不会根据先前的输入完成任何用户输入。默认情况下，该值设置为开启。
示例
让我们来看一个 Input Search autocomplete 属性的示例 −
<!DOCTYPE html>
<html>
<body>
<h1>Input Search autocomplete property</h1>
<form action="/Sample_page.php">
FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br>
<input type="submit">
</form>
<p>Off the autocomplete in the above search field by clicking on the below button</p>
<button onclick="changeAuto()">Autocomplete Off</button>
<p id="Sample"></p>
<script>
function changeAuto() {
document.getElementById("SEARCH1").autocomplete = "off";
document.getElementById("Sample").innerHTML = "Your text will not autocomplete now";
}
</script>
</body>
</html>
输出
这将产生以下输出 −
在上述字段中输入一些文本后，您可以看到基于先前输入的文本自动完成功能 −
点击"关闭自动完成"按钮后，自动完成的文本将不会被捕获 −
在上述示例中 −
我们首先创建了一个 <input>元素，其 type=”search”，name=”fruits”，并将其 autocomplete 属性设置为 on。这确保文本将根据我们之前的输入完成。搜索字段位于表单内，该表单也包含一个"提交"按钮，用于将表单数据提交到服务器 −
<form action="/Sample_page.php"> FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on><br><br> <input type="submit> </form>
然后我们创建一个"自动完成关闭"按钮当用户点击时，将执行 changeAuto() 方法。 −
<button onclick="changeAuto()">Autocomplete Off</button>
changeAuto() 方法使用 getElementById() 方法获取类型为 “search” 的 <input> 元素，并将其 autocomplete 属性值设置为 off。这意味着文本现在将不会自动完成，用户必须手动输入完整的文本。然后，我们使用其 innerHTML 属性在 id 为 “Sample” 的段落中显示有关此更改的消息。 −
function changeAuto() {
document.getElementById("SEARCH1").autocomplete = "off";
document.getElementById("Sample").innerHTML = "Your text will not autocomplete now";
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
