Question

以下是我在div中显示匹配用户输入的代码，但我想在没有用户输入匹配时隐藏div。我似乎无法使用以下代码执行此操作：

HTML code：

 <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';
    }
}

    }

Answer 1

正则表达式是一个功能强大的工具，但是使用它们来完成这么简单的工作通常很麻烦。首先，你使用直接输入作为正则表达式，这是永远不会那么好。

我复制了您的代码并分析了您正在制作许多错误

的逻辑

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（）;

可以轻松实现正则表达式时使用正则表达式

这些是纯粹的逻辑错误

Answer 2

考虑使用jquery。（实用程序有一点http://underscorejs.org/）

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

$("#filter").keyup(function() {
  if(_.include(myArray, $(this).val()) { 
    $('#lc').show()
  } else {
    $('#lc').hide() 
  }
}

用javascript隐藏div元素

2 个答案: