ユーザー入力を使用して名前の提案を提供する

名前を持つ配列があり、ユーザーが文字列を入力して名前の候補を入力する入力フィールドがあります.Names Alex、Annaは配列に属し、アレックス『と『アンナ』.Here」我々は提案をしたい』私のコードです：ユーザー入力を使用して名前の提案を提供する

<!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>

それは罰金、私はスペースを入力し、Delキーを押した場合1 thing.Whenは、最初にロードされて期待して動作します配列全体が名前の提案として表示されています。私はそれを望んでいません。入力フィールドが空でない場合にのみ表示される提案が必要です。ユーザがこれまで入力した内容を削除すると、私はこれをします？

出典

2016-05-23 Aggelos Sfakianos

すると、NULL値を持つ配列を初期化してみ何かを検索する。その後、配列を再初期化する可能性があります。

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

@Blueテキストをトリミングするなど、他にも修正が加えられています。ただし、w3schoolsはリンクしないでください。チュートリアルや説明は間違っていることが多く、ベストプラクティスを反映していません。 – ssube

ユーザー入力を使用して名前の提案を提供する

答えて

関連する問題