ユーザーがJavaScriptでテキストを入力したときにシーケンスに一致しない単語をフィルタリングする

Question

名前のリストを作成しようとしていますが、ユーザーがテキストを入力するたびに名前をフィルタリングしてユーザーが入力したテキストと一致します。ユーザーがクリアボタンをクリックすると、入力をクリアしてすべての名前を再度表示する必要があります。

私はdivに表示する名前の配列を作った。問題は、最初にすべての名前を調べると、完全にフィルタリングされます（すべてのキーアップイベントで、チェックするすべての名前をループします...）。もう一度ループして（ユーザーが入力する2番目の文字）、それはもはや単語を削除しません...誰かが私が問題を解決するのを助けることができますか？

また、私はクリアボタンをクリックしたとき、それは画面をクリアし、アレイからのすべての単語をバック置くが、それはもう、それが動作しない単語を削除しません

...

これは、私のjavascriptファイルのコード：

words = ["MARY", "PATRICIA", "LINDA", "BARBARA", "ELIZABETH", "JENNIFER", "MARIA", "SUSAN"] 
window.addEventListener("load", CreateWords); 
function CreateWords() { 
    for (var i = 0; i < words.length; i++) { 
     newP = document.createElement('p'); 
     newP.appendChild(document.createTextNode(words[i])); 
     var div = document.getElementById("wordDiv"); 
     div.appendChild(newP); 
     newP.style.fontSize = 20; 
     newP.id = words[i]; 
    } 
} 

var lettersTyped = document.getElementById("userInput"); 
lettersTyped.addEventListener("keyup", filterWords); 
var clearButton = document.getElementById("clearButton"); 
clearButton.addEventListener("click", ClearScreen); 

function filterWords() { 
    for (var i = 0; i < words.length; i++) { 
     var val = words[i].toLocaleLowerCase().search(lettersTyped.value); 

     if (val == -1) { 
      var child = document.getElementById(words[i]); 
      child.parentNode.removeChild(child); 
     } 
    } 
} 

function ClearScreen() { 
    for (var i = 0; i < words.length; i++) { 
     newP = document.createElement('p'); 
     newP.appendChild(document.createTextNode(words[i])); 
     var div = document.getElementById("wordDiv"); 
     div.appendChild(newP); 
     newP.style.fontSize = 20; 
     newP.id = words[i]; 
    } 
    lettersTyped.value = " "; 
} 

Answer 1

これはかなり簡単な修正です。

1. 私はCreateWordsを取り除き、ClearScreenを代わりに使用しました。
2. のinnerHTML〜""をClearScreenの先頭に設定して、重複したエントリが表示されないようにします。
3. はif (child)で保護されているので、単語が既に除外されているときに改行されません。
4. " "の代わりにlettersTyped.value~""と設定しました。
5. searchの代わりにindexOfを使用しました。これは、正規表現ではなく、正確な文字列に一致させるためです。

ここに私の完成したコードです：

words = ["MARY", "PATRICIA", "LINDA", "BARBARA", "ELIZABETH", "JENNIFER", "MARIA", "SUSAN"] 
window.addEventListener("load", ClearScreen); 

var lettersTyped = document.getElementById("userInput"); 
lettersTyped.addEventListener("keyup", filterWords); 
var clearButton = document.getElementById("clearButton"); 
clearButton.addEventListener("click", ClearScreen); 

function filterWords() { 
    for (var i = 0; i < words.length; i++) { 
     var val = words[i].toLocaleLowerCase().indexOf(lettersTyped.value); 

     if (val === -1) { 
      var child = document.getElementById(words[i]); 
      if (child) { 
       child.parentNode.removeChild(child); 
      } 
     } 
    } 
} 

function ClearScreen() { 
    document.getElementById("wordDiv").innerHTML = ""; 
    for (var i = 0; i < words.length; i++) { 
     newP = document.createElement('p'); 
     newP.appendChild(document.createTextNode(words[i])); 
     newP.style.fontSize = 20; 
     newP.id = words[i]; 
     var div = document.getElementById("wordDiv"); 
     div.appendChild(newP); 
    } 
    lettersTyped.value = ""; 
    lettersTyped.focus(); 
} 

注このコードのいくつかの問題が残っていることは。例えば。あなたが "mary"とタイプして "mar"を得るためにYを削除すると、あなたはおそらく "MARIA"を再び表示したいでしょう。また、大文字と小文字を区別しない比較が必要な場合もあります。 （あなたが資本Mを入力すると、それは「MARY」を除外するべきではありません。）

EDIT

より完全な修正、考慮に私はと呼ばれる他の問題を取ります。 「クリア」ボタンを完全に取り除いたことに注意してください。ユーザーは入力を削除して完全なリストをもう一度見ることができるからです。

words = ["MARY", "PATRICIA", "LINDA", "BARBARA", "ELIZABETH", "JENNIFER", "MARIA", "SUSAN"]; 

function filter() { 
    document.getElementById("wordDiv").innerHTML = ""; 
    var typed = document.getElementById("userInput").value.toLocaleLowerCase(); 

    for (var i = 0; i < words.length; i++) { 
     if (words[i].toLocaleLowerCase().indexOf(typed) !== -1) { 
      var p = document.createElement("p"); 
      p.appendChild(document.createTextNode(words[i])); 
      document.getElementById("wordDiv").appendChild(p); 
     } 
    } 
} 

window.addEventListener("load", filter); 
document.getElementById("userInput").addEventListener("keyup", filter);