jquery-mobilejquery-mobile-listview

JQM Filterable Widget: how to clear on leaving page?


I am using jquery mobile 1.4.5.

I have a listview with a filterable widget that uses the reveal feature. It filters a client-side json file. The json items appear as expected when the search is run. However, when navigating away from the page and then returning to the page, the list of items is still visible.

I'd like the filterable list reset to "" when there is a page change.

I'm not sure how to do this. I've searched and searched, but haven't found the answer. TIA

<ul data-role="listview" spry:region="dsAPDTall" data-filter-reveal="true" data-filter="true" data-filter-placeholder="Search..." data-filter-theme="a" data-inset="true"> 
                
                
			<li spry:repeat="ds1" spry:setrow="ds1" >
                 <a href="#{page}"> 
                 <p class="ui-li-aside">{someContent}</p> 
                 <img src={imageurl} style="width:80px;height:80px;border:#006;border-style:solid; border-width:thin">
                 </a>
             </li>
		</ul>		


Solution

  • One way to do this is to activate the clear filter button on pagebeforeshow:

    $(document).on("pagebeforeshow", "#page1", function () {
        $("#page1 .ui-filterable .ui-input-clear").click();
    });
    

    DEMO

    Each time the page is being shown, we find any clear buttons within .ui-filterable containers and activate the click() event of the button.