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

ことができますなら、私に教えてください。フィルタの動作はfilterableウィジェットに分離されたjQueryのモバイル1.4 ため

更新。あなたのリストビューの内容を更新し、1回のスワイプでフィルタを再実行することができます

$(".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 –

それが見えるように内容が更新されます以下のコードを追加して、リストビューを更新した後：

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

出典

2012-09-08 11:22:14

前述のリストビューのリフレッシュを使用した以外にも、リストアイテムにjQueryの.show()を使用する原因となりますのでご了承くださいdisplay:block;を要素のCSSに追加します。 jQMのui-screen-hiddenクラスよりも優先順位が高いため、一致しないアイテムを非表示にする検索フィルタの機能に干渉します。だから、

あなたの代わりに.show()の.css('display','')を使用し、.show()/.hide()コンボを経由してリストに項目を追加する場合。

新しい隠されたアイテムを追加するための私の一般的な順序：

// 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

答えて

関連する問題