Question

我正在使用jquerymobile。在列表中我有一个过滤器。当用户在其中键入内容时，过滤效果很好。但是，当我向列表中添加更多项目时，过滤不会刷新。

知道如何刷新过滤？（重新过滤列表？）

由于

Answer 1

在将项目添加到列表后，在搜索输入字段上触发更改事件。

$(".ui-input-search .ui-input-text").trigger("change");

样本：

<html>
<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
       $("#btn").live("click",function(){
            $("#list").append("<li><a href='#'>100</a></li><li><a href='#'>200</a></li><li><a href='#'>400</a></li><li><a href='#'>500</a></li><li><a href='#'>1000</a></li>");
            $("#list").listview("refresh");
            $("#page").trigger("create");
            $(".ui-input-search .ui-input-text").trigger("change");
       });
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

</head>

<body>
<div id="page" data-role="page">
<div data-role="header">
    <h1>Test Page</h1>
</div>
<div data-role="content"> 
    <ul id="list" data-role="listview" data-inset="true" data-filter="true">
        <li><a href="#">1</a></li>
        <li><a href="#">12</a></li>
        <li><a href="#">41</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">91</a></li>
        <li><a href="#">65</a></li>
    </ul>
    <a data-role="button" id="btn">Add more</a>
</div>
</div><!-- /page -->
</body>

</html>

演示 - http://pastehtml.com/view/bnl7lpe3o.html

如果有帮助，请告诉我。

jQuery Mobile 1.4的更新 过滤器行为已分离为filterable窗口小部件。您可以更新列表视图内容并在一次滑动中重新运行过滤器：

$( ".listselector" ).filterable( "refresh" );

这样做的一个好处是列表项立即被过滤。在手动触发输入控件之前，您不会遇到在过滤之前瞬间看到项目的视觉故障。见http://api.jquerymobile.com/filterable/#method-refresh

上面的代码将不再有效，因为jQuery Mobile会跟踪输入到过滤器中的最后一个文本，并且如果输入未更改则不会过滤。如果您想要触发输入控件，则需要以下hack来首先清除最后输入的输入：

$(".ui-input-search input").attr('data-lastval', '').trigger("change");

但是，请使用前面的filterable功能。

Answer 2

我认为应该使用refresh方法解决问题，但我不确定：

$('#mylist').listview('refresh');

Answer 3

更新列表视图后，添加以下代码将刷新内容以使其可见：

$("#list").listview("refresh");

Answer 4

除了使用前面提到的listview刷新之外，请注意在listitem上使用jQuery的.show()将导致display:block;添加到元素的CSS中。因为它优先于jQM的ui-screen-hidden类，所以它会干扰searchfilter在不匹配时隐藏项目的能力。

因此，如果您要通过.show() / .hide()组合将项目添加到列表中，请使用.css('display','')代替.show()。

我添加新隐藏项目的一般顺序：

// 1. Clear display:none and display:block, if necessary, from the listitem
$(yourLI).css('display','');
// 2. Apply jQM formatting, such as corners and other CSS, to the entire listview
$(yourListView).listview('refresh');
// 3. Make sure the searchfilter runs on the new items without user intervention
$(".ui-input-search .ui-input-text").trigger("change");

jquerymobile重新过滤

4 个答案: