[英]Show autocomplete only after 3 entered chars in <datalist> field?
只有在用戶輸入至少 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.
然后在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()方法將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 並監聽 input 元素的keyup事件。
然后檢查輸入的值是否超過 3 個字符，如果是，則需要向服務器發出 ajax 請求以獲取相關名稱並使用它們填充datalist
只是想我會分享我在keyUp和keyDown上使用setAttribute和removeAttribute所做的事情，以在文本框包含至少 3 個字符並處理退格鍵（ keyCode=8 ）以防止顯示完整列表時顯示數據列表（ dir ）因為它擴大了搜索結果。
<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 的簡單解決方案的人，只需一個簡單的數據列表。
是否有可能表現出來 <datalist> 只有在輸入3個字符后才能自動完成？
[英]Is it possible to show <datalist> autocomplete only after 3 chars entered?
AngularJS + Bootstrap-驗證文本框-僅在用戶輸入一些數據后如何顯示驗證反饋？
[英]AngularJS + Bootstrap - Validating Text Box - how to show validation feedback only after the user has entered some data?
jQuery UI自動完成-在KEYDOWN / KEYUP之后訪問輸入的搜索詞
[英]jQuery UI Autocomplete - access entered search term after KEYDOWN / KEYUP
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.