CODEWITHSUNDEEP
javascriptjquerysearch
TechEng
TechEng

Reputation: 17

Jquery, search and show a hidden div

Im working on a grocery list where you can search and add groceries to your list. My grocery items are populated from a MySQL table and the text is added to a div called "foodcard". My Jquery script almost works exactly how i want it, except that all 150+ cards are visible and only when you start typing in the input box do the cards get hidden and fade in the related search term. Im having trouble figuring out how to hide the cards on page load and show only the search term. ill give you all my code, but please tell me if i need to include anymore

$(document).ready(function(){

 
  $('#grcsearch').on('keyup', function () {
    var grcsearch = $('#grcsearch').val().toLowerCase();    
   
   $('.foodcard').each(function(){
    var $this = $(this);
    
    if($this.text().toLowerCase().indexOf(grcsearch) === -1)
    $this.closest('.foodcard').fadeOut();
    else $this.closest('.foodcard').fadeIn();

   })     
  
   });         
  });
.wrapper {
    text-align: center;
  
    
}

.grocerylistcard {
    width: 85%;
    height: 90%;
    border-radius:15px;
    padding-bottom: 20px;   
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    border-width: 2px;
    border: solid 2px;
    border-color: rgb(199, 185, 201);
    background-color: #D5CAD6;
    margin: auto;
    display: inline-block;
    box-shadow: 5px 5px 3px grey;
}

.pccontainer1 {
   display: flex;
   flex-direction: row;
   }
   
   .foodcard {
    width: 15%;
    background-color: rgb(236, 231, 203);
    margin: 10px;
    margin-right: 10px !important;
    margin-left: 10px !important;
    
    border-radius: 10px;
    display: inline-table;
          
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta http-equiv="Expires" content="-1">


    <title>J & K Life Assist</title>
    <!-- MDB icon -->
    <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
    <!-- Google Fonts Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Material Design Bootstrap -->
    <link rel="stylesheet" href="css/mdb.min.css">
    <!-- Your custom styles (optional) -->
    <link rel="stylesheet" href="/css/style.css">
    <!-- custom font awesome kit-->
    
      <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>



<div class="wrapper">
        <div class="grocerylistcard">
            <h3 id="bptitle"> Grocery List </h3>
            <p>Search and add groceries we need to get on our next trip out!</p>
            <hr class="my-4">

            <div class="md-form form-lg" id="grocerysearchwrap">
                <input type="text" id="grcsearch" class="form-control form-control-lg">
                <label for="grocerysearch">Search for Groceries</label>
                
            </div>

     
            <!-- Central Modal Small -->
            <br />

<!-- this is where my PHP sript loads the SQL table items, but heres some hand typed cards for your reference -->
<div class="pccontainer1">

            <div class="foodcard">
            
              Apples
            </div>
            <div class="foodcard">
              
              Banana's
            </div>
            <div class="foodcard">
              
              Oranges
            </div>
            <div class="foodcard">
           
              Butter
            </div>
            <div class="foodcard">
              
              Milk
            </div>
                   
           </div> <!--pc container-->

           <div class="pccontainer1">

            <div class="foodcard">
              
              Bread
            </div>
            <div class="foodcard">
           
              Ramen
            </div>
            <div class="foodcard">
             
              Chicken
            </div>
            <div class="foodcard">
              
              Ground Beef
            </div>
            <div class="foodcard">
             
              Cheese
            </div>
                   
           </div> <!--pc container-->
<!-- grocery items above -->
        </div>
        <!--grocery card ends here-->
    </div> <!-- customcard wrapper-->

Upvotes: 1

Views: 46

Answers (4)

user3401335
user3401335

Reputation: 2405

I made two changes:

in the css for setup initially state

.foodcard{display: none}

and in JS, add a condition for text empty

 grcsearch.trim().length === 0


$(document).ready(function(){

 
  $('#grcsearch').on('keyup', function () {
    var grcsearch = $('#grcsearch').val().toLowerCase();    
   
   $('.foodcard').each(function(){
    var $this = $(this);
    
    if($this.text().toLowerCase().indexOf(grcsearch) === -1 || grcsearch.trim().length === 0)
    {
       $this.closest('.foodcard').fadeOut();}
    else $this.closest('.foodcard').fadeIn();

   })     
  
   });         
  });
.wrapper {
    text-align: center;
  
    
}

.grocerylistcard {
    width: 85%;
    height: 90%;
    border-radius:15px;
    padding-bottom: 20px;   
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    border-width: 2px;
    border: solid 2px;
    border-color: rgb(199, 185, 201);
    background-color: #D5CAD6;
    margin: auto;
    display: inline-block;
    box-shadow: 5px 5px 3px grey;
}

.pccontainer1 {
   display: flex;
   flex-direction: row;
   }
   
   .foodcard {
    width: 15%;
    background-color: rgb(236, 231, 203);
    margin: 10px;
    margin-right: 10px !important;
    margin-left: 10px !important;
    
    border-radius: 10px;
    display: inline-table;
          
}

.foodcard{display: none}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta http-equiv="Expires" content="-1">


    <title>J & K Life Assist</title>
    <!-- MDB icon -->
    <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
    <!-- Google Fonts Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Material Design Bootstrap -->
    <link rel="stylesheet" href="css/mdb.min.css">
    <!-- Your custom styles (optional) -->
    <link rel="stylesheet" href="/css/style.css">
    <!-- custom font awesome kit-->
    
      <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>



<div class="wrapper">
        <div class="grocerylistcard">
            <h3 id="bptitle"> Grocery List </h3>
            <p>Search and add groceries we need to get on our next trip out!</p>
            <hr class="my-4">

            <div class="md-form form-lg" id="grocerysearchwrap">
                <input type="text" id="grcsearch" class="form-control form-control-lg">
                <label for="grocerysearch">Search for Groceries</label>
                
            </div>

     
            <!-- Central Modal Small -->
            <br />

<!-- this is where my PHP sript loads the SQL table items, but heres some hand typed cards for your reference -->
<div class="pccontainer1">

            <div class="foodcard">
            
              Apples
            </div>
            <div class="foodcard">
              
              Banana's
            </div>
            <div class="foodcard">
              
              Oranges
            </div>
            <div class="foodcard">
           
              Butter
            </div>
            <div class="foodcard">
              
              Milk
            </div>
                   
           </div> <!--pc container-->

           <div class="pccontainer1">

            <div class="foodcard">
              
              Bread
            </div>
            <div class="foodcard">
           
              Ramen
            </div>
            <div class="foodcard">
             
              Chicken
            </div>
            <div class="foodcard">
              
              Ground Beef
            </div>
            <div class="foodcard">
             
              Cheese
            </div>
                   
           </div> <!--pc container-->
<!-- grocery items above -->
        </div>
        <!--grocery card ends here-->
    </div> <!-- customcard wrapper-->

Upvotes: 1

Catch22
Catch22

Reputation: 401

You can hide all the cards in document ready callback:

$(document).ready(function(){
   $('.foodcard').hide()
...
}

// For handling clearing search text
$('#grcsearch').change(function () {
    if ($(this).val().trim() == '') {
      $(".foodcard").hide()
    }
})

Upvotes: 0

Sim Hm
Sim Hm

Reputation: 107

You could use display: none; on .foodcard in your CSS file , so that the elements are hidden even before the page is loaded

Then you can use the .show() or .hide() jquery functions in your JS file to display/hide the elements

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

The first step is to test if the grcsearch value is an empty string. You can achieve this with:

grcsearch.trim().length == 0

This condition must be in OR with the if condition:

if(grcsearch.trim().length == 0 || $this.text().toLowerCase().indexOf(grcsearch) === -1)

At the end of your keyup event you can trigger the event at dom ready simply triggering it:

.trigger('keyup');


$('#grcsearch').on('keyup', function () {
    var grcsearch = $('#grcsearch').val().toLowerCase();

    $('.foodcard').each(function(){
        var $this = $(this);

        if(grcsearch.trim().length == 0 || $this.text().toLowerCase().indexOf(grcsearch) === -1)
            $this.closest('.foodcard').fadeOut();
        else {
            $this.closest('.foodcard').fadeIn();
        }
    })
}).trigger('keyup');
.wrapper {
    text-align: center;


}

.grocerylistcard {
    width: 85%;
    height: 90%;
    border-radius:15px;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    border-width: 2px;
    border: solid 2px;
    border-color: rgb(199, 185, 201);
    background-color: #D5CAD6;
    margin: auto;
    display: inline-block;
    box-shadow: 5px 5px 3px grey;
}

.pccontainer1 {
    display: flex;
    flex-direction: row;
}

.foodcard {
    width: 15%;
    background-color: rgb(236, 231, 203);
    margin: 10px;
    margin-right: 10px !important;
    margin-left: 10px !important;

    border-radius: 10px;
    display: inline-table;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="wrapper">
    <div class="grocerylistcard">
        <h3 id="bptitle"> Grocery List </h3>
        <p>Search and add groceries we need to get on our next trip out!</p>
        <hr class="my-4">

        <div class="md-form form-lg" id="grocerysearchwrap">
            <input type="text" id="grcsearch" class="form-control form-control-lg">
            <label for="grocerysearch">Search for Groceries</label>

        </div>


        <!-- Central Modal Small -->
        <br />

        <!-- this is where my PHP sript loads the SQL table items, but heres some hand typed cards for your reference -->
        <div class="pccontainer1">

            <div class="foodcard">

                Apples
            </div>
            <div class="foodcard">

                Banana's
            </div>
            <div class="foodcard">

                Oranges
            </div>
            <div class="foodcard">

                Butter
            </div>
            <div class="foodcard">

                Milk
            </div>

        </div> <!--pc container-->

        <div class="pccontainer1">

            <div class="foodcard">

                Bread
            </div>
            <div class="foodcard">

                Ramen
            </div>
            <div class="foodcard">

                Chicken
            </div>
            <div class="foodcard">

                Ground Beef
            </div>
            <div class="foodcard">

                Cheese
            </div>

        </div> <!--pc container-->
        <!-- grocery items above -->
    </div>
    <!--grocery card ends here-->
</div> <!-- customcard wrapper-->

Upvotes: 1

Related Questions