jquerymobile refiltering

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

任何想法如何刷新过滤？（重过滤列表？）

感谢

2012-02-09 Guy

触发搜索输入字段更改事件在项目被添加到列表之后像这样。

$(".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会跟踪输入到过滤器中的最后一个文本，并且不会过滤输入是否未更改。如果您没有想要触发输入控制，就需要下面的技巧，首先清除最后输入的输入：

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

但是，请使用filterable功能向前发展。

来源

2012-02-09 17:11:28 user700284

我觉得这个问题应该refresh方法来解决，但我不知道：

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

来源

2012-02-09 15:51:29 Pablo

JQM文件的列表视图方法http://jquerymobile.com/demos/1.0.1/docs/lists/docs-lists.html – 2012-02-09 18:42:43

更新列表视图中，添加以下代码，使之成为可见将刷新后的内容：

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

来源

2012-09-08 11:22:14

除了使用前面提到的列表视图刷新，请注意使用jQuery的.show()上一个ListItem会引起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");

来源

2013-01-11 22:22:09 Maple

jquerymobile refiltering

回答

相关问题