Здравствуйте у меня вопрос поводу написания живого поиска в Html, css, JS

Рейтинг: -3Ответов: 2Опубликовано: 02.07.2023

...Нужно, что бы вариантов ответа не была видно, как это сделать ?

const search = () => {
    const searchbox = document.getElementById("search-item").value.toUpperCase();
    const storeitems = document.getElementById("product-list")
    const product = document.querySelectorAll(".product")
    const pname = document.getElementsByTagName("h2")

    for(var i = 0; i < pname.length; i++) {
        let match = product[i].getElementsByTagName("h2")[0]; 

        if(match) {
            let textvalue = match.textContent || match.innerHTML

            if(textvalue.toUpperCase().indexOf(searchbox) > -1) {
                product[i].style.display = "";
           } else {
                product[i].style.display = "none";
           }
        }
    }
}
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900$display=swap");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: "Source Sans Pro", sans-serif; 
}

body {
    width: 100%;
    height: 100vh;
    background: rgb(240, 239, 243);
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container {
    width: 375px;
    height: 520px;
    background: #fff;
    border-radius: 15px;
    box-shadow:  4px 4px 30px rgba (0, 0, 0, 0.06);
    padding: 20px;
    overflow-y: scroll;
    
}

.container::-webkit-scrollbar {
    display: none;
}

.container form {
    width: 100%;
    border: 1px solid rgb(82, 74, 235);
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.container form input {
    border: none;
    outline: none;
    box-shadow: none;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 10px;
}

.container form i {
   padding-left: 10px;
}

.product-list {
    padding: 20px 0;
}

.product {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-bottom: 15px;
}

.product img {
    width: 100px;
    height: 70px;
    object-fit: cover;
    border-radius: 5px;
}

.product .p-detalis {
    padding-left: 15px;
}

.product .p-detalis h2 {
    font-size: 20px;
    color: #1d1d1d
}

.product .p-detalis h3 {
    font-size: 18px;
    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    
    <section class="container">
         <form>
             <i class="fas fa-search"></i>
             <input type="text" id="search-item" placeholder="Search products">
         </form>

          <div class="product-list" id="product-list">
              <div class="product"> 
                 <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_adidas_1306_TV8585696.webp" alt="">
                 <div class="p-details">
                     <h2>Tshirt For Everyone</h2>
                     <h3>$25</h3>
                 </div>
              </div>

              <div class="product"> 
                <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_adidas_1306_TV8585696.webp" alt="">
                <div class="p-details">
                    <h2>Tshirt For Everyone</h2>
                    <h3>$20</h3>
                </div>
             </div>

             <div class="product"> 
                <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_adidas_1306_TV8585696.webp" alt="">
                <div class="p-details">
                    <h2>Tshirt For Everyone</h2>
                    <h3>$30</h3>
                </div>
             </div>

             <div class="product"> 
               <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_adidas_1306_TV8585696.webp" alt="">
               <div class="p-details">
                   <h2>Barev cez</h2>
                   <h3>$35</h3>
               </div>
            </div>

            <div class="product"> 
                <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_adidas_1306_TV8585696.webp" alt="">
                <div class="p-details">
                    <h2>Tshirt For Everyone</h2>
                    <h3>$20</h3>
                </div>
             </div>

             <div class="product"> 
                <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_adidas_1306_TV8585696.webp" alt="">
                <div class="p-details">
                    <h2>Tshirt For Everyone</h2>
                    <h3>$30</h3>
                </div>
             </div>

             <div class="product"> 
               <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_adidas_1306_TV8585696.webp" alt="">
               <div class="p-details">
                   <h2>Tshirt For Everyone</h2>
                   <h3>$35</h3>
               </div>
            </div>

          </div>

    </section>

</body>
</html>

css javascript html jquery
Источник: Stack Overflow на русском

Ответы

▲ 0
.product {
    display: none;
    align-items: center;
    cursor: pointer;
    padding-bottom: 15px;
}

display: flex; заменить на display: none;

▲ 0

Укажите классу product свойство display: none;

.product {
    display: none;
    align-items: center;
    cursor: pointer;
    padding-bottom: 15px;
}

В if который отвечает за поиск добавьте дополнительную проверку на пустой input. Если input.value будет пустым, то будет возвращено false и элементы не появятся.

if(textvalue.toUpperCase().indexOf(searchbox) > -1 && searchbox) {
  product[i].style.display = "flex";
} else {
  product[i].style.display = "none";
}