jQuery Mobile Keep Your Filtered Results After Performing a Backbone.js Sort

One of the features that jQuery Mobile brings to the table are lists. If you add data-filter="true" to your listview, then you’ll be presented with a nicely styled input box like so:

Your list will be filtered by whatever has been typed into the input box.

For one of the projects I am working on, I’ve been using the Backbone.js library to help keep the application from looking like a bowl of jQuery spaghetti. Part of the application allows the users to sort the listview in different fashions via Backbone’s sort method. After the sort was executed I was losing my filtered results and was again presented with the entire list. Boo!

The jQuery Mobile listview filter binds to the keyup event on the input box. We just have to trigger that event after our Backbone sort and voila!

    sort: function (e) {
      CoolList.sort();
      $('input[data-type="search"]').trigger('keyup');
    }

The best of both worlds!