个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
是否可以仅在用户输入至少 3 个字母后自动完成？这是我当前的代码:
HTML/PHP:
<form name="form" class="form-container" method="post" onsubmit="return doValidate()" id="myForm2">
<label>
<input placeholder="Organisator" id="name" list="users" name="mitarbeiter" required />
</label>
<datalist id="users" class="dle" >
<?php
for ($i=0; $i<$counts; $i++) {
echo '<option value="'.$AllData[$i]["mail"][0].'">'.$AllData[$i]["cn"][0].'</option>';
}
?>
</datalist>
<br><br>
von
<input type="time" name="zeitstart" class="zeitangaben" id="startzeitid"> Uhr bis
<input type="time" name="zeitende" id="endzeitid" class="zeitangaben"> Uhr <br><br>
<button type="submit" class="btn" name="submit">Reservierung erstellen</button>
<button type="reset" class="btn cancel" onclick="hideDiv()">Abbrechen</button>
</form>
我只找到一些使用jquery的代码，不使用jquery就不可能做到这一点吗？
这可能吗？有什么想法吗？
最佳答案
这是一种方法:删除 datalist ID属性。
首先，声明querySelector()方法。
var input = document.querySelector("#name"), // Selects the input.
datalist = document.querySelector("datalist"); // Selects the datalist.
然后声明 addEventListener input上的方法元素。
// Adds a keyup listener on the input.
input.addEventListener("keyup", (e) => {
// If input value is longer or equal than 2 chars, adding "users" on ID attribute.
if (e.target.value.length >= 2) {
datalist.setAttribute("id", "users");
} else {
datalist.setAttribute("id", "");
}
});
说明
当输入值的长度大于或等于2时，setAttribute()方法设置 datalist ID属性为"users" .
我将运算符设置为 >= 2而不是>= 3 。原因如下:datalist每次按键都会触发下拉元素。
整个过程是这样的:
length == 1 id="" - 下拉不显示，无ID链接到datalist ;length == 2 id="users" - 下拉不显示，则datalist有其ID设置为"users" ;length == 3 id="users" - 下拉菜单现在显示 ID设置为"users"并显示下拉列表。缺点
>= 2时设置该属性，如果输入长度== 3 ，当输入长度 == 2 时，该属性将被移除，当输入长度 == 1 时下拉菜单将被隐藏.OS 的一部分不是DOM元素，它不能被设置样式(或隐藏，在这种情况下)。这就是为什么我使用setAttribute()设置或删除 ID 的方法.升级？
一个伟大的升级/完美解决方案是在 JS 中创建一个下拉菜单就在输入法的下面。下拉列表将是 DOM 元素，您可以按照您想要的方式设置它的样式。你可以很容易地显示它 > 2字符并隐藏它 < 3字符。
代码片段
var input = document.querySelector("#name"), // Selects the input.
datalist = document.querySelector("datalist"); // Selects the datalist.
// Adds a keyup listener on the input.
input.addEventListener("keyup", (e) => {
// If input value is larger or equal than 2 chars, adding "users" on ID attribute.
if (e.target.value.length >= 2) {
datalist.setAttribute("id", "users");
} else {
datalist.setAttribute("id", "");
}
});
// I had to include your doValidate() function otherwise I would get an error while validaing.
function doValidate() {};<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reading json</title>
<script type="text/javascript">function log(p) {return console.log(p)}</script>
</head>
<body>
<form name="form" class="form-container" method="post" onsubmit="return doValidate()" id="myForm2">
<label><input placeholder="Organisator" id="name" list="users" name="mitarbeiter" autocomplete='off' required /></label>
<datalist id="users" class="dle">
<option value="alicia@keys.com">Alicia Keys</option>
<option value="alicia@keyssecond.com">Alicia The Second</option>
<option value="john@doe.com">John Doe</option>
<option value="martin@scorsese.com">Martin Scorsese</option>
<option value="iron@man.com">Iron Man</option>
</datalist><br><br>
von <input type="time" name="zeitstart" class="zeitangaben" id="startzeitid"> Uhr bis <input type="time" name="zeitende" id="endzeitid" class="zeitangaben"> Uhr <br><br>
<button type="submit" class="btn" name="submit">Reservierung erstellen</button>
<button type="reset" class="btn cancel" onclick="hideDiv()">Abbrechen</button>
</form>
</body>
</html>关于javascript - 仅在 <datalist> 字段中输入 3 个字符后才显示自动完成功能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57202606/
24
4
0
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及预
为什么在 C# 中添加两个 char 结果是 int 类型？ 例如，当我这样做时: var pr = 'R' + 'G' + 'B' + 'Y' + 'P'; pr 变量变为 int 类型。我希望它是
下面的代码可以编译，但 char 类型的行为与 int 类型的行为不同。 特别是 cout ::ikIsX >() ::ikIsX >() ::ikIsX >() using names
我正在寻找一个正则表达式，它可以匹配长度为 1 个或多个字符但不匹配 500 的内容。这将在 Rails 路由文件中使用，特别是用于处理异常。 路线.rb match '/500', to: 'err
对于 C 编程作业，我正在尝试编写几个头文件来检查所谓的“X 编程语言”的语法。我最近才开始，正在编写第一个头文件。这是我编写的代码: #ifndef _DeclarationsChecker_h_
为什么扩展的 ascii 字符(â、é 等)被替换为 字符？ 我附上了一张图片...但我正在使用 PHP 从 MySQL 中提取数据，其中一些位置有扩展字符...我使用的是 Arial 字体。 您可以
我有一个与 R 中的断线相关的简单问题。 我正在尝试粘贴，但在获取(字符/数字)之间的断线时遇到问题。请注意，这些值包含在向量中(V1=81,V2=55,V3=25)我已经尝试过这段代码: cat(p
如何将 ANSI 字符 (char) 转换为 Unicode 字符 (wchar_t)，反之亦然？ 是否有用于此目的的任何跨平台源代码？ 最佳答案 是的，在 中你有mbstowcs()和 wcsto
函数 fromCharCode 不适用于国际 ANSI 字符。例如，对于 ID 为 192 到 223 的俄语 ANSI (cp-1251) 字符，它返回特殊字符。如何解决这个问题？ 我认为，需要将A
如果不喜欢，我想隐藏 id，但不起作用 SELECT * FROM character, character_actor WHERE character.id NOT LIKE character_a
现在这个程序成功地反转了键盘输入的单词。但是我想在我反转它之前“保存”指针中的单词，所以我可以比较两者，反转的和“原始的”，并检查它们是否是回文。我还没有太多经验，可能会出现比我知道的更多的错误，但我
Memcpy 和 memcmp 函数可以接受指针变量吗？ char *p; char* q; memcpy(p,q,10); //will this work? memcmp(p,q,10); //w
恐怕我对一个相当过饱和的主题的细节有疑问，我搜索了很多，但找不到一个明确的答案来解决这个特定的明显-imho-重要的问题: 使用UTF-8将byte[]转换为String时，每个字节(8bit)都变成
我有一个奇怪的问题。我需要从 stat 命令打印输出字符串。 我已经编写了获取一些信息的代码。 import glob import os for file in glob.glob('system1
我正在使用 Java 并具有其值如下所示的字符串， String data = "vale-cx"; data = data.replaceAll("\\-", "\\-\\"); 我正在替换其中的“
String urlParameters = "login=test&password=te&ff"; 我有一个String urlParams，& - 是密码的一部分，如何使其转义，从而不被识别为分
大家好，我只想从此字符串中提取第一个字母: String str = "使 徒 行 傳 16:31 ERV-ZH"; 我只想获取这些字符: 使 徒 行 傳 并且不包括 ERV-ZH 仅数
这个问题已经有答案了: Crash or "segmentation fault" when data is copied/scanned/read to an uninitialized point
所以， 我有一个字符**；它本质上是一个句子，带有指向该句子中每个单词的指针；即 'h''i''\0''w''o''r''l''d''\0''y''a''y''!''\0' 在这种情况下，我希望使用可
这个问题在这里已经有了答案: Using quotation marks inside quotation marks (12 个答案) 关闭 7 年前。 如何打印 " 字符？ 我知道打印 % 符号
我是一名优秀的程序员,十分优秀！