Guy*_*Guy 1 javascript jquery listview jquery-mobile
我正在使用jquerymobile.在列表中我有一个过滤器.当用户在其中键入内容时,过滤效果很好.但是,当我向列表中添加更多项目时,过滤不会刷新.
知道我怎么能刷新过滤？(重新过滤列表？)
谢谢
将项目添加到列表后,在搜索输入字段上触发更改事件.
$(".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功能.