Question

Following is the code where I display matched user input in the div but I want to hide the div when there is no match for user input. I can’t seem to do it with the following code:

HTML code:

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

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

JS code:

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

Regular expressions are a powerful tool but using them for so trivial a job is often troublesome.First you are using a direct input as regular expression which is never so good.

I copied your code and analyzed the logic you are making many many errors

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

consider your code above, if I enter football, it matches with football, and football is shown. Next it checks for baseball which does not match and visibility changes to hidden!!

Better logic

1.Check what strings match, and add them to the division.

2.Check how many strings have matched, if none, change visibility to hidden.

You are using regular expressions when this actully can be achieved easily with indexOf();

these are pure logical errors