1

以下は、divに一致するユーザー入力を表示するコードですが、ユーザー入力に一致するものがない場合はdivを非表示にします。私は次のコードでそれを行うことができないようです：

HTMLコード：

 <input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" />

 <div id="lc">  <p id='placeholder'> </p>  </div>

JSコード：

 // JavaScript Document

 s1= new String()
 s2= new String()
 var myArray = new Array();

 myArray[0] = "Football";
 myArray[1] = "Baseball";
 myArray[2] = "Cricket";
 myArray[3] = "Hockey";
 myArray[4] = "Basketball";
 myArray[5] = "Shooting";

 function test()
 {
 s1 = document.getElementById('filter').value;
 var myRegex = new RegExp((s1),"ig");
  arraysearch(myRegex);
  }

 function arraysearch(myRegex)
 {
  document.getElementById('placeholder').innerHTML=""; 
for(i=0; i<myArray.length; i++)
{ 
if (myArray[i].match(myRegex))
{ 
   document.getElementById('lc').style.visibility='visible';
   document.getElementById('placeholder').innerHTML += myArray[i] + "<br/>";
}
    else
    {
   document.getElementById('lc').style.visibility='hidden';
    }
}

    }
4

2 に答える 2

0

正規表現は強力なツールですが、非常に些細な作業に使用するのは面倒なことがよくあります。まず、正規表現として直接入力を使用しますが、これは決して良いことではありません。

私はあなたのコードをコピーし、あなたが多くの多くのエラーを犯しているロジックを分析しました

for(i=0; i<myArray.length; i++)
{ 
if (myArray[i].match(myRegex))
{ 
   document.getElementById('lc').style.visibility='visible';
   document.getElementById('placeholder').innerHTML += myArray[i] + "<br/>";
}
    else
    {
   document.getElementById('lc').style.visibility='hidden';
    }

上記のコードを検討してください。私がサッカーに入ると、サッカーと一致し、サッカーが表示されます。次に、一致しない野球をチェックし、視界が非表示に変わります!!

より良いロジック

1.一致する文字列を確認し、部門に追加します。

2.一致する文字列の数を確認します。一致しない場合は、可視性を非表示に変更します。

indexOf（）を使用してこれを簡単に実現できる場合は、正規表現を使用しています。

これらは純粋な論理エラーです

于 2012-09-26T18:08:56.650 に答える
0

jqueryの使用を検討してください。（ユーティリティ用に少しhttp://underscorejs.org/を使用）

var myArray = ["Football"、 "Baseball"、 "Cricket"、 "Hockey"、 "Basketball"、 "Shooting"]

$（ "＃filter"）。keyup（function（）{
  if（_。include（myArray、$（this）.val（））{
    $（'＃lc'）。show（）
  } そうしないと {
    $（'＃lc'）。hide（）
  }
}
于 2012-09-26T18:17:21.177 に答える