Trying to display data from my searchbox but looks like it is not working at all

Question

I am trying make a Search box for my website where I can search for the servers I have listed. I have attached a ngrok Tunnel Link to my localhost. HERE

Now this is my HTML code for the search bar:

            
                
                    
                        
                            
                                
                                    Search Location

This is my HTML location element

This is the code for my JS script file:

function searchLocation() {
    let input = document.getElementById('searchbar').value;
    input = input.toLowerCase();
    let location = document.getElementsByClassName('location');
    let locationName = document.getElementById('locationOf');
    for (var i = 0; i < location.length; i++) {
        if (!location[i].innerHTML.toLowerCase().includes(input)) {
            location[i].style.display = "none";
        }
        else if (input == locationName.innerHTML) {
            return location[i].style.display.location.innerHTML;
        }
    }
}

Can you please check it and tell me what am I doing wrong? You can check out the Ngrok link too to see it. Thanks in advance

Avinash Dalvi · Accepted Answer

Problem is not with script its with your

is nested inside check your php code where your added loop to iterate this name.

Check my snippet i arrange in proper manner its working.

function getParent(ele, parentClass="parent"){
   var e = ele;
   while(!e.classList.contains(parentClass)){
      e=e.parentElement;
   }
  // console.log(e);
   return e;
}

function searchLocation() {
    let input = document.getElementById('searchbar').value;
    //console.log(input);
    input = input.toLowerCase();
    let location = document.getElementsByClassName('location');
    
    if(input == ""){
       for (var i = 0; i < location.length; i++) {
           location[i].style.display = "block";
       }
    }
    else{
    
    let locationName = document.getElementsByClassName('locationOf');
    var parent;
    for (var i = 0; i < locationName.length; i++) {
    parent = getParent(locationName[i], "location");
        if (!locationName[i].innerHTML.toLowerCase().includes(input)) {
            parent.style.display = "none";
        }
        else if (input == locationName.innerHTML) {
            return parent.style.display = "block";
        }
    }
    }
}


  
    
      
        
          
            Search Location
          
        
      
    
  
  
    
      
        
          
            
              
            

            
              
            
          
        
      
    
  




  
    
      
        
								
							
        Arizona
      
    
  


  
    
      
        
								
							
        Michigan
      
    
  


  
    
      
        
								
							
        Detroit
      
    
  


  
    
      
        
								
							
        New York
      
    
  


  
    
      
        
								
							
        Atlanta
      
    
  


  
    
      
        
								
							
        Atlanta
      
    
  


  
    
      
        
								
							
        Atlanta
      
    
  


  
    
      
        
								
							
        Atlanta
      
    
  


  
    
      
        
								
							
        Atlanta

Trying to display data from my searchbox but looks like it is not working at all

Answers (1)

Related Questions