数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
服装研究
法律研究HTML DOM 输入搜索自动完成属性
HTML DOM 输入搜索 autocomplete 属性与 type="search" 的 <input> 元素的 autocomplete 属性相关联。autocomplete 属性接受 "on" 或 "off" 值。on 值指定 Web 浏览器必须根据之前的输入自动完成用户文本，而 off 值则相反。
语法
以下是语法：
设置 autocomplete 属性：
searchObject.autocomplete = "on|off"
这里，on 表示 Web 浏览器将根据之前的输入自动完成用户输入，而 off 表示它不会根据之前的输入完成任何用户输入。默认情况下，其值为 on。
示例
让我们来看一个输入搜索自动完成属性的示例：
<!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>输出
这将产生以下输出：
在上面的字段中输入一些文本时，您可以看到您的文本根据之前的输入自动完成：
单击“关闭自动完成”按钮后，自动完成文本将不会被捕获：
在上面的示例中：
我们首先创建了一个 type="search"、name="fruits" 的 <input> 元素，并将其 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() 方法获取 type 为“search”的 <input> 元素，并将其 autocomplete 属性值设置为 off。这意味着文本现在不会自动完成，用户必须手动输入完整文本。然后，我们使用其 innerHTML 属性在 id 为“Sample”的段落中显示有关此更改的消息：
function changeAuto() {
document.getElementById("SEARCH1").autocomplete = "off";
document.getElementById("Sample").innerHTML = "Your text will not autocomplete now";
}
更新于：2021年2月19日
167 次浏览
广告