I have an application with facebook integration. I want them to be able to select friends. When they select a friend, I add it to another list and remove it from the source list.

I set up the first list with auto dividers and enabled filtering. When the user chooses a facebook friend, I remove the <li> from the list view and call refresh.

Issue:

1. User enters part of the name as a search filter
2. User picks a friend
3. I remove the LI from the UL (listview)
4. I call listview("refresh") on it
5. All the dividers appear, not just the ones that match the current search filter

So if they search for "Eric" that only has one user, so the only divider is currently "E". They tap on the Eric user, all the dividers appear when none should.

Versions:

jQuery 1.8.1

jQuery mobile 1.2.0-rc.1

Google Chrome 21.0.1180.89 running on Mac OSX 10.8.2

HTML code:

2.         <ul data-role="listview" data-inset="true" data-theme="b" data-filter="true"
3.           id="fb-friends-listview" data-autodividers="true" data-divider-theme="a">
4.         </ul>

JavaScript:

1. $(document)
2.   .on("click", ".add-fb-friend",
3.     function (evt)
4.     {
5.       evt.preventDefault();
6.       var $a = $(evt.target);
7.       var $li = $a.closest("li");
8.       var $ul = $li.closest("ul");
9.       $li.remove();
10. 
    
11.       $ul.listview("refresh");
12.     });

Users (li elements) added via javascript. Code in the loop:

2. var $ul = $("#fb-friends-listview");
3. var array = /* data from facebook */;
4. $.each(array,
5.   function (i, item)
6.   {
7.     var fbId = item["uid"];
8.     var $li = $(document.createElement("li"));
9.     var $a = $(document.createElement("a"));
10.     $a.attr({ "href": "#", "class": "add-fb-friend" })
11.       .text(item["name"])
12.       .appendTo($li)
13.       .data("fbID", fbId);
14.     $ul.append($li);
15.   });
16. 
    
17. $ul.listview("refresh");
18. $("#fb-user-popup").popup("open", { "positionTo": "window", "history": false });