2016-05-23 11 views
0

Ok, so dass wir einen Array mit Namen, und ein Eingabefeld, in dem Benutzer eine Zeichenfolge eingibt, und wir wollen er suggestions.Names Alex geben nennt, gehören Anna das Array und zum Beispiel, wenn der Benutzer eingibt " a Alex ‚und‚Anna‘.Hier ist mein Code“ wir Vorschlag machen wollen‘:Providing Namensvorschläge Benutzereingabe mit

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

Es funktioniert gut, erwartet ein thing.When geladen zum ersten Mal, wenn ich SPACE eingeben und dann die Taste ENTF ganz Array wird als Name suggestion..I nicht gezeigt that.I einen Vorschlag wollen will nur kommen, wenn das Eingabefeld nicht-empty.When Benutzer löscht, was er bisher getippt hat will ich keine Vorschläge kommen up.How tun ich mache das?

Antwort

0

Versuchen Sie das Array mit einem Nullwert initialisiert wird, so dass, wenn Sie in Leerzeichen eingeben und löschen, es weiß nicht suche nach etwas. Eventuell das Array danach neu initialisieren.

Seit Ihrer Verwendung onkeyup, nachdem Sie Raum getroffen haben, wird alles im Array gesucht, das mit einem Leerzeichen übereinstimmt, was in diesem Fall alles im Array zu sein scheint.

+0

das Array mit einem Nullwert initialisiert wird fehlschlagen, wenn Sie '.join' nennen und ungewöhnliche Ergebnisse führen können, wenn der Text leer ist. – ssube

1

Zwar gibt es andere Verbesserungen, die gemacht werden können, beinhaltet das Update auf Ihr unmittelbares Problem, bevor Sie die Länge der Zeichenfolge Überprüfung Ergebnisse hindeutet. Wenn die Eingabe leer ist, geben Sie keine Vorschläge ein.

Sie können eine einfache str.length > 0 Prüfung verwenden, wie:

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>

+0

Ja, es war so einfach ... Vielen Dank –

+0

Sie auch Ihren Text trimmen (http://www.w3schools.com/jsref/jsref_trim_string.asp) möchten. – Blue

+0

@Blue gibt es einen Haufen von anderen Korrekturen, die vorgenommen werden könnten, um den Text einschließlich Besatz. Bitte verlinken Sie nicht w3schools; Ihre Tutorien und Erklärungen sind oft falsch und entsprechen nicht den Best Practices. – ssube