仅在 <datalist> 字段中输入 3 个字符后显示自动完成？答案

【问题标题】：Show autocomplete only after 3 entered chars in <datalist> field?仅在 <datalist> 字段中输入 3 个字符后显示自动完成？
【发布时间】：2019-07-25 13:01:57
【问题描述】：

是否可以仅在用户输入至少 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就不能做到这一点吗？

有可能吗？有什么想法吗？

【问题讨论】：

自动完成是什么意思？你想自动完成什么？组织者的名字？自动完成是否必须在您的数据库中获取组织者的名称？显示更多细节。
@AlexisPhilip 是的，数据列表显示了我数据库中的组织者名称。用户只需写 1 个字母，datalist 就会自动显示一些名称。但我希望该数据列表仅在用户输入至少 3 个字母时显示名称。
我在下面的答案中提供了一个工作示例。它对你有用吗？如果是，您可以接受带有复选标记的答案。

标签： javascript

【解决方案1】：

这是一种方法：删除 datalist ID 属性。

首先，声明querySelector() 方法。

var input    = document.querySelector("#name"), // Selects the input.
    datalist = document.querySelector("datalist"); // Selects the datalist.

然后在input元素上声明addEventListener方法。

// 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()方法将datalistID属性设置为"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时该属性会被移除，输入长度@时下拉隐藏987654351@.
因为下拉列表是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>

【讨论】：

这几乎就是我想要的。我想要建议中 3 个字母之后出现的名称。目前，名称显示在输入字段下方，并且在用户输入一个字母后已指示建议。如果您可以更改它，这将是我的答案。 :)
我的错，我误解了你的问题。这是一个新的答案:)
我有一个类似的解决方案，但它遇到了与此相同的问题：它只能以一种方式工作。如果我键入 SEC，则只会出现 Alicia the Second。但是如果我按退格键只留下 SE，Martin Scorsese 就会出现。在这个玩具示例中这不是问题，但在我的情况下，我有一个包含 500-1000 个文章代码的列表，所以我真的希望 minLength 保持不变。有什么想法吗？

【解决方案2】：

您需要使用 javascript 并为您的输入元素监听 keyup 事件。

然后检查输入的值是否超过3个字符，如果是，则需要向服务器发出ajax请求以获取相关名称并使用它们填充datalist

【讨论】：

【解决方案3】：

只是想在文本框包含至少 3 个字符并处理退格 (keyCode=8) 以防止在扩大搜索结果时显示完整列表。

<input type="search" name="q" id="q" autofocus="true"
       onkeyup="if(this.value.length>=3)this.setAttribute('list','dir');" 
       onkeydown="if(this.value.length<3||event.keyCode==8)this.removeAttribute('list');"
       placeholder="Search Staff Directory"
/>

希望这可以帮助任何寻找不需要 jQuery 或 Ajax 的简单解决方案的人，只需一个简单的数据列表。

【讨论】：