Refustering jquerymobile

J'utilise jquerymobile. Et sur une liste, j'ai un filtre. Lorsqu'un utilisateur saisit quelque chose, il filtre très bien. Toutefois, lorsque j'ajoute d'autres éléments à la liste, le filtrage ne se rafraîchit pas.

Une idée de la façon de rafraîchir le filtrage? (Ré-filtrer la liste?)

Merci

Déclenchez un événement de changement dans le champ de saisie de recherche comme ceci, après l'ajout des éléments à la liste.

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

Un échantillon:

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

Demo – http://pastehtml.com/view/bnl7lpe3o.html

Faites-moi savoir si cela vous a été utile.

Mise à jour pour jQuery Mobile 1.4 Le comportement du filtre a été séparé en un filtre filterable . Vous pouvez mettre à jour votre contenu listview et relancer le filtre en un seul coup de glace:

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

Un avantage intéressant est que les éléments de la liste sont filtrés immédiatement. Vous ne ressentez pas le problème visuel de voir les objets pendant une fraction de seconde avant qu'ils ne soient filtrés, comme vous le feriez lors du déclenchement manuel du contrôle d'entrée. Voir http://api.jquerymobile.com/filterable/#method-refresh

Le code ci-dessus ne fonctionnerait plus, car jQuery Mobile surveille le dernier texte entré dans le filtre et ne filtre pas si l'entrée n'a pas changé. Si vous vouliez déclencher le contrôle d'entrée, vous devriez avoir le hack suivant pour d'abord effacer la dernière entrée entrée:

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

Mais, utilisez la fonction filterable à l'avenir.

Je pense que le problème devrait être résolu avec la méthode de refresh , mais je ne suis pas sûr:

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

Après avoir mis à jour la vue de la liste, ajouter le code ci-dessous actualisera le contenu afin qu'il soit visible:

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

En plus d'utiliser le rafraîchissement listview mentionné précédemment, notez que l'utilisation de .show() 's .show() sur un listitem provoquera l' display:block; À ajouter au CSS de l'élément. Parce qu'il prévaut sur la classe ui-screen-hidden jQM, cela interfère avec la capacité du filtre de recherche à masquer les éléments lorsqu'ils ne correspondent pas.

Donc, si vous ajoutez des éléments à la liste par l'intermédiaire des .show() / .hide() , utilisez .css('display','') au lieu de .show() .

Mon ordre général pour ajouter de nouveaux éléments cachés:

 // 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");