如何清除或重置列表视图中的搜索过滤栏？答案

【问题标题】：How to clear or reset the search filter bar in listviews?如何清除或重置列表视图中的搜索过滤栏？
【发布时间】：2013-04-14 02:59:41
【问题描述】：

为了这个问题的答案，我到处搜索。我有一个使用 listview 搜索过滤器的应用程序。但是，当用户离开页面时，搜索过滤器会“记住”之前的搜索。

我的问题：当用户离开页面时如何重置搜索过滤器？下次打开页面时，我想清除搜索过滤器，以便再次显示整个列表，并且之前的搜索被“忘记”？

【问题讨论】：

很可能是它的浏览器缓存&请发布一些代码以便我们提供更多帮助

标签： jquery jquery-mobile filtering jquery-mobile-listview jquery-mobile-fieldset

【解决方案1】：

首先你需要像这样清空它：

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

工作 jsFiddle 示例：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");
});

【讨论】：

非常感谢您尝试回答我的问题。我不想使用按钮来清除搜索过滤器。当用户离开搜索页面或“关闭”搜索页面时，我想清除它。我将使用您提供的代码来尝试获得解决方案。这是一个好的开始。如果我能找到答案，我会在这里发布。再次感谢你的帮助。我知道你花了一些时间来做这件事，我很感激。 -雷切尔

【解决方案2】：

删除输入值，触发 keyup 事件以撤消最后一个过滤器，并（如果需要）将光标聚焦以进行新搜索。

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

【讨论】：

【解决方案3】：

你可能想试试这个：

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

此外，您可能希望添加任何您可能拥有的表单

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

【讨论】：