How to clear or reset the search filter bar in listviews?

Question

I've searched high and low for the answer to this question. I have an application that uses a listview search filter. However, when the user moves away from the page, the search filter "remembers" the previous search.

My question: How do I reset the search filter when the user navigates away from the page? The next time the page is opened, I'd like the search filter cleared so that the entire list is again displayed and the previous search is "forgotten"?

Answer 1

You may want to try this:

$('a[data-icon="delete"]').trigger('click');

Additionaly you may want to prepend any forms that you may have like so

$('#myForm a[data-icon="delete"]').trigger('click');

Answer 2

Remove the input value, trigger a keyup event to undo the last filter, and (if you want) focus the cursor for a new search.

$(document).ready(function () {
    $('#input-filter').val('').trigger('keyup').focus();
});

Answer 3

First you need to empty it like this:

$('input[data-type="search"]').val("");
$('input[data-type="search"]').trigger("keyup");

Working jsFiddle example: http://jsfiddle.net/Gajotres/fEV3J/

HTML :

<div data-role="content">
    <div data-role="fieldcontain">    
        <ul data-role="listview" data-filter="true">
            <li><a href=#>Cat</a></li>
            <li><a href=#>Dog</a></li>
            <li><a href=#>Mouse</a></li>
        </ul>
    </div>
    <div data-role="fieldcontain">       
       <input type="button" value="Clear" id="clear-filter"/>
    </div>
</div>

JS :

$(document).on('click', '#clear-filter', function(){       
    $('input[data-type="search"]').val('');
    $('input[data-type="search"]').trigger("keyup");
});