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

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");
});