CODEWITHSUNDEEP
javascripthtmlvs-web-site-project
Daimen
Daimen

Reputation: 73

While loop to hide div elements

I am trying to create searchable content with the help of some JS yet am having trouble hiding the content when there is no input in the search field.

Here is my script:

var $searchContainer = $("#search");
var $contentBoxes = $searchContainer.find(".content");
var $searchInput = $searchContainer.find("#search-input");
var $searchBtn = $searchContainer.find("#search-btn");

$searchBtn.on("click", searchContent);
$searchInput.on("input", searchContent);

while($searchInput == null) {
    for($contentBoxes) {
        hide();
    }
}

function searchContent(){
    var userInput;

  //Check if call comes from button or input change
    if($(this).is(":button")){
    userInput = $(this).siblings("input").val();
  } else {
    userInput = $(this).val();
  }

  //make the input all lower case to make it compatible for searching
  userInput = userInput.toLowerCase();

  //Loop through all the content to find matches to the user input
  $contentBoxes.each(function(){

    var headerText = $(this).find(".title").text();
    var contentText = $(this).find(".description").text();
    //add the title and content of the contentbox to the searchable content, and make it lower case
    var searchableContent = headerText + " " + contentText;
        searchableContent = searchableContent.toLowerCase();


    //hide content that doesn't match the user input


    if(!searchableContent.includes(userInput)){
      $(this).hide();
    } else {
      $(this).show();
    }

  });

};

I understand a while loop could have a condition where if userInput is equal to null it would loop through each content box and hide the element.

Something like this maybe? 

while($searchInput == null) {
    $contentBoxes.each(function(){
        hide();
    }
}

Any help would be greatly appreciated.

Upvotes: 0

Views: 140

Answers (2)

Laurent Dhont
Laurent Dhont

Reputation: 1062

You would need to update your userInput variable every cycle of the loop because the userInput value never gets updated. Nonetheless this not a good way to do this because you will block your entire application.

There is no need for a loop, just use an if statement. Also, because this function gets executed when the value of the input is changed, there is no need to use this.

You could put this block of code beneath your $contentBoxes.each function:

$contentBoxes.each(function(){

var headerText = $(this).find(".title").text();
var contentText = $(this).find(".description").text();
//add the title and content of the contentbox to the searchable content, and make it lower case
var searchableContent = headerText + " " + contentText;
    searchableContent = searchableContent.toLowerCase();


//hide content that doesn't match the user input


if(!searchableContent.includes(userInput)){
  $(this).hide();
} else {
  $(this).show();
}

  });



if (userInput === null) {
  $contentBoxes.each(function(){
      $(this).hide();
  });
}

Upvotes: 1

Vladimir K
Vladimir K

Reputation: 32

I think it will be work like this. You just check if search input !== null and dont hide any content in this case

if($searchInput != null && !searchableContent.includes(userInput)){
    $(this).hide();
 } else {
    $(this).show();
 }

Upvotes: 0

Related Questions