Ok, so I have a filterable search form that returns certain images in a grid, which works great, it resets when I delete the text in the search input, but when I click the "Clear" button, which should do the same thing as deleting the text, it doesn't work. Here is the HTML and JQuery used:

    <form id="live-search" action="" class="styled" method="post" style="margin: 2em 0;">
        <div class="form-group">
            <input type="text" class="form-control" id="filter" value="" style="width: 80%; float: left;" placeholder="Type to search"/>
            <span id="filter-count"></span>
            <input type="button" class="clear-btn" value="Clear" style="background: transparent; border: 2px solid #af2332; color: #af2332; padding: 5px 15px; border-radius: 3px; font-size: 18px; height: 34px;">
        </div>
     </form>

This is the JQuery for the clearing text:

    jQuery(document).ready(function(){
          jQuery("#filter").keyup(function(){

                            // Retrieve the input field text and reset the count to zero
                            var filter = jQuery(this).val(), count = 0;

                            // Loop through the ment list
                            jQuery(".watcheroo").each(function(){

                                jQuery(this).removeClass('active');

                                // If the list item does not contain the text phrase fade it out
                                if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {

                                jQuery(this).fadeOut();

                                // Show the list item if the phrase matches and increase the count by 1
                                } else {

                                jQuery(this).show();
                                count++;

                                }

                                });

                            // Update the count
                            var numberItems = count;

                    });
                    //clear button remove text
                    jQuery(".clear-btn").click( function() {
                            jQuery("#filter").value = "";

                    });

    });  

Any help would greatly be appreciated.

Ok, so I have a filterable search form that returns certain images in a grid, which works great, it resets when I delete the text in the search input, but when I click the "Clear" button, which should do the same thing as deleting the text, it doesn't work. Here is the HTML and JQuery used:

    <form id="live-search" action="" class="styled" method="post" style="margin: 2em 0;">
        <div class="form-group">
            <input type="text" class="form-control" id="filter" value="" style="width: 80%; float: left;" placeholder="Type to search"/>
            <span id="filter-count"></span>
            <input type="button" class="clear-btn" value="Clear" style="background: transparent; border: 2px solid #af2332; color: #af2332; padding: 5px 15px; border-radius: 3px; font-size: 18px; height: 34px;">
        </div>
     </form>

This is the JQuery for the clearing text:

    jQuery(document).ready(function(){
          jQuery("#filter").keyup(function(){

                            // Retrieve the input field text and reset the count to zero
                            var filter = jQuery(this).val(), count = 0;

                            // Loop through the ment list
                            jQuery(".watcheroo").each(function(){

                                jQuery(this).removeClass('active');

                                // If the list item does not contain the text phrase fade it out
                                if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {

                                jQuery(this).fadeOut();

                                // Show the list item if the phrase matches and increase the count by 1
                                } else {

                                jQuery(this).show();
                                count++;

                                }

                                });

                            // Update the count
                            var numberItems = count;

                    });
                    //clear button remove text
                    jQuery(".clear-btn").click( function() {
                            jQuery("#filter").value = "";

                    });

    });  

Any help would greatly be appreciated.

• javascript
• jquery

Share Improve this question Follow asked Nov 11, 2016 at 17:05 MikeL5799MikeL5799 45511 gold badge1111 silver badges2929 bronze badges 1

• Please visit following link and use that solution. <stackoverflow./a/57264409/11814121> – RainyTears Commented Jul 30, 2019 at 5:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

value is a property on a DOMElement, not a jQuery object. Use val('') instead:

jQuery(document).ready(function($) {
    $("#filter").keyup(function() {
        var filter = $(this).val(), 
            count = 0;

        $(".watcheroo").each(function(){
            var $watcheroo = $(this);
            $watcheroo.removeClass('active');

            if ($watcheroo.text().search(new RegExp(filter, "i")) < 0) {
                $watcheroo.fadeOut();
            } else {
                $watcheroo.show();
                count++;
            }
        });
        var numberItems = count;
    });

    $(".clear-btn").click(function() {
        $("#filter").val(''); // <-- note val() here
    });
}); 

Note that I amended your code to alias the instance of jQuery passed in to the document.ready handler. This way you can still use the $ variable safely within the scope of that function.

As the accepted answer doesn't solve the problem.

Try input event instead of keyup

$("#filter").on("input", function() {.....

& then clear the filter input field on which event you want.

$(".clear-btn").on("click", function() {
  $("#filter").val("").trigger("input");
});

Add this to your CSS:

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

<form>
  <input type="search" name="search" placeholder="Search...">
</form>