Jquery, поиск и отображение скрытого div - PullRequest
Новая
       1

Jquery, поиск и отображение скрытого div

1 голос
/ 29 мая 2020

Я работаю над списком покупок, где вы можете искать и добавлять продукты в свой список. Мои продукты заполняются из таблицы MySQL, а текст добавляется в div, называемый «foodcard». Мой Jquery сценарий почти работает именно так, как я хочу, за исключением того, что все 150+ карточек видны, и только когда вы начинаете вводить текст в поле ввода, карточки скрываются и исчезают в соответствующем поисковом запросе. Мне трудно понять, как скрыть карточки при загрузке страницы и показать только поисковый запрос. Я дам вам весь свой код, но, пожалуйста, скажите мне, нужно ли мне еще включать 

$(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-->
  • Я новичок в этом сообществе. спасибо за любую помощь!

Ответы [ 4 ]

1 голос
/ 29 мая 2020

Я внес два изменения:

в css для начального состояния настройки 

.foodcard{display: none}

и в JS, добавьте условие для пустого текста 

 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-->
1 голос
/ 29 мая 2020

Первый шаг - проверить, является ли значение grcsearch пустой строкой. Вы можете добиться этого с помощью: 

grcsearch.trim().length == 0

Это условие должно быть в ИЛИ с условием if : 

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

В конце вашего keyup событие, вы можете вызвать событие, когда дом готов, просто запустив его: 

.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-->
0 голосов
/ 29 мая 2020

Вы можете использовать display: none; на .foodcard в вашем CSS файле, чтобы элементы были скрыты даже до загрузки страницы

Затем вы можете использовать .show() или .hide() jquery функции в вашем JS файле для отображения / скрытия элементов

0 голосов
/ 29 мая 2020

Вы можете скрыть все карточки в обратном вызове готовности документа: 

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

// For handling clearing search text
$('#grcsearch').change(function () {
    if ($(this).val().trim() == '') {
      $(".foodcard").hide()
    }
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...