仅在< datalist>中输入3个字符后才显示自动完成功能场地? [英] Show autocomplete only after 3 entered chars in <datalist> field?

问题描述

是否只有在用户输入至少3个字母后才能自动完成?这是我当前的代码:

Is it possible to autocomplete only after a user entered at least 3 letters? Here is my current code:

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就无法做到这一点吗?

I only find some Code with Jquery, is it not possible to do this without jquery?

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

Is it even possible? Any ideas?

推荐答案

这里是一种方法:删除数据列表 ID 属性.

Here is a way to do it: removing the datalist ID attribute.

首先，声明 querySelector()方法.

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

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

Then declare the addEventListener method on the input element.

// 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", "");
    }
});

说明

Explanation

当输入值的长度大于或等于2时， setAttribute()方法将 datalist ID 属性设置为用户" .

When the input value has a length greater than or equal to 2, the setAttribute() method sets the datalist ID attribute to "users".

我将运算符设置为> = 2 而不是> = 3 .原因如下:每次按下按键时都会触发 datalist 下拉元素.

I set the operator to >= 2 and not >= 3. Here is why: the datalist dropdown element is triggered at each keypress.

过程如下:

1. length == 1 id =" -不显示下拉列表，没有 ID 链接到数据列表;
2. length == 2 id ="users" -不显示下拉菜单，然后 datalist 具有其 ID 设置为用户" ;
3. length == 3 id ="users" -下拉菜单现在显示 ID 设置为"users"并显示下拉列表.

1. length == 1 id="" - The drop down is not displayed, no ID is linked to the datalist;
2. length == 2 id="users" - The drop down is not displayed, then datalist has its ID set to "users";
3. length == 3 id="users" - The drop down now reads that the ID is set to "users" and displays the drop down.

缺点

Cons

• 由于在输入长度为> = 2 时设置了属性，因此，如果输入长度 == 3 ，则在输入长度 == 2 ，当输入长度 == 1 时，下拉菜单将被隐藏.
• 由于下拉列表是 OS 的一部分，而不是 DOM 元素，则无法设置样式(在这种情况下为隐藏).这就是为什么我使用 setAttribute()方法设置或删除 ID .

• Since the attribute is set when the input length is >= 2, if the input length == 3, the attribute will be removed when the input length == 2, and the drop down will be hidden when the input length == 1.
• Since the drop down list is part of the OS and is not a DOM element, it cannot be styled (or hidden, in this case). This is why I used the setAttribute() method to set or remove the ID.

升级?

Upgrade?

一个很好的升级/完美解决方案是在输入下方的 JS 中创建一个下拉列表.下拉列表将是DOM元素，您可以按照自己的方式对其进行样式设置.您可以轻松地显示它>2 字符并将其隐藏<3 个字符.

A great upgrade / perfect solution would be creating a dropdown in JS just under the input. The drop down would be DOM element, and you could style it the way you want. You could ealisy display it > 2 chars and hide it < 3 chars.

代码段

Snippet

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="[e-mail]">Alicia Keys</option>
        <option value="[e-mail]">Alicia The Second</option>
        <option value="[e-mail]">John Doe</option>
        <option value="[e-mail]">Martin Scorsese</option>
        <option value="[e-mail]">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>

这篇关于仅在< datalist>中输入3个字符后才显示自动完成功能场地?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！