jquerymobile 重新过滤答案

【问题标题】：jquerymobile refilteringjquerymobile 重新过滤
【发布时间】：2012-02-09 15:44:34
【问题描述】：

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

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

谢谢

【问题讨论】：

标签： javascript jquery listview jquery-mobile

【解决方案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 函数。

【讨论】：

【解决方案2】：

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

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

【讨论】：

jQM Docs on listview方法jquerymobile.com/demos/1.0.1/docs/lists/docs-lists.html

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

除了使用前面提到的列表视图刷新之外，请注意，在列表项上使用 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");

【讨论】：