使用用戶輸入提供姓名建議

好的，我們有一個名稱數組和輸入字段，用戶輸入一個字符串，我們想給他名字建議。名字Alex，Anna屬於數組，並且例如當用戶輸入「一個」我們要建議‘亞歷克斯’和‘安娜’。這裏是我的代碼：使用用戶輸入提供姓名建議

<!DOCTYPE html> 
<html> 
<body> 



<p class="thick"> Name*: </p> <input type="text" id="fullname" onkeyup="myFunction();"> 

<p id="test"></p> 

<script> 
var namesArray= ["Alex","Anna","Eva","George","Jason","John","Lisa","Mary","Michael","Nick","Vicky"]; 
function myFunction() { 
var text = document.getElementById('fullname').value; 
var patt1 = new RegExp('^' + text, "i"); 

var result = []; 
for (i = 0; i < namesArray.length; i++) { 
    if (patt1.test(namesArray[i])) 
     result.push(namesArray[i]); 
} 

document.getElementById("test").innerHTML = result.join('<br />'); 
} 

</script> 

</body> 
</html>

它工作正常加載指望在第一次一個thing.When，如果我進入空間，然後按Delete整個數組顯示爲名稱建議..我不希望這一點。我想要一個建議，只有當輸入字段是非空的時候纔會出現。當用戶刪除他輸入的內容到目前爲止，我不想提出任何建議。怎麼辦我這樣做？

來源

2016-05-23 Aggelos Sfakianos

嘗試初始化數組與空值，這樣，當你在太空中鍵入和刪除，它知道不搜索任何東西。之後可能重新初始化數組。

由於您在使用onkeyup時，遇到空間後，它將搜索數組中與空間匹配的所有內容，在這種情況下，該數組似乎是數組中的所有內容。

來源

2016-05-23 17:38:29

當您調用'.join'時，用空值初始化數組將失敗，並且當文本爲空時可能會導致異常結果。 – ssube

雖然還有其他可以改進的地方，但解決您的直接問題包括在提示結果之前檢查字符串的長度。如果輸入爲空，則不要提供建議。

您可以使用一個簡單的str.length > 0檢查，如：

var namesArray = ["Alex", "Anna", "Eva", "George", "Jason", "John", "Lisa", "Mary", "Michael", "Nick", "Vicky"]; 
 

 
function myFunction() { 
 
    var text = document.getElementById('fullname').value; 
 

 
    var patt1 = new RegExp('^' + text, "i"); 
 

 
    var result = []; 
 

 
    // Check length 
 
    if (text.length > 0) { 
 
    for (i = 0; i < namesArray.length; i++) { 
 
     if (patt1.test(namesArray[i])) 
 
     result.push(namesArray[i]); 
 
    } 
 
    } 
 

 
    document.getElementById("test").innerHTML = result.join('<br />'); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <p class="thick">Name*:</p> 
 
    <input type="text" id="fullname" onkeyup="myFunction();"> 
 

 
    <p id="test"></p> 
 
</body> 
 

 
</html>

來源

2016-05-23 17:37:24 ssube

是的，就是這麼簡單...非常感謝 –

您可能還想修剪（http://www.w3schools.com/jsref/jsref_trim_string.asp）您的文字。 – Blue

@藍色還有一堆可以製作的其他修復，包括修剪文本。但是，請不要鏈接w3schools;他們的教程和解釋往往是錯誤的，並不反映最佳做法。 – ssube

使用用戶輸入提供姓名建議

回答

相關問題