There is a function for the catalog search form AND the button next to it

function check() { var search = $('#search-field').val(); if (search.length != 0) { $('#submit').removeAttr('disabled'); } else { $('#submit').attr('disabled', 'disabled'); } } 

 $("#search-field").on("input", function () { var search=$(this).val(); if(!search){ $(".card").show(); return; } $(".card").hide(); $(".card").each(function() { if( $(this).text().toLowerCase().indexOf(search.toLowerCase())>=0 ){ $(this).show(); } }); }); function check() { var search = $('#search-field').val(); if (search.length != 0) { $('#submit').removeAttr('disabled'); } else { $('#submit').attr('disabled', 'disabled'); } } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <form> <input class="form-control my-2 mr-lg-2" id="search-field" type="search" placeholder="Search" aria-label="Search" onkeyup="check();"> <button class="btn btn-outline-secondary my-2 ml-md-2" id="submit" type="submit" disabled>Clear List</button> </form> <div class="card">1</div> <div class="card">2</div> <div class="card">3</div>

When you enter a query in the search form, it is necessary that by clicking on the button the data that was entered into the form was deleted and the function stopped working, that is, did not filter.

Tried by assigning value = ""; it cleared the form, but the filtering did not reset.

The button with an empty form is disabled, if something is written to the form, disable is removed. Need to save this property ...

Can you please tell me how to do this?

    0