While loop to hide div elements

Question

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.

while($searchInput == null) this value would never change in this while loop, so, if it were null, you'd end up with an infinite loop — Jaromanda X
– Jaromanda X, Commented Apr 24, 2020 at 3:18

Laurent Dhont · Accepted Answer · 2020-04-24 04:12:16Z

1

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();
  });
}

edited Apr 24, 2020 at 4:12

answered Apr 24, 2020 at 3:23

Laurent Dhont

1,0722 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Daimen Over a year ago

Hi @Laurent Dhont, thank you for your reply. How would I go about doing this?

Laurent Dhont Over a year ago

@Daimen Hi, I added some code. I never used jquery so I hope this is correct code.

Daimen Over a year ago

Hi thank you so much for your response. Unfortunately this is still showing elements when the search box is null.

Laurent Dhont Over a year ago

@Daimen Could you open your console and check if you get any error messages?

Daimen Over a year ago

no error unfortunately.. this has got my stumped haha

Vladimir K · Accepted Answer · 2020-04-24 03:21:10Z

0

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();
 }

answered Apr 24, 2020 at 3:21

Vladimir K

322 bronze badges

Collectives™ on Stack Overflow

While loop to hide div elements

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related