Jquery mobile Collabsible Listview not updating

我正在尝试使用可折叠列表视图进行远程自动完成。它工作完美的普通列表视图，但当我使用折叠列表视图，它不工作。请看演示。http://jsfiddle.net/Q8dBH/8/

<div data-role="page" id="startseite">

    <!--<div data-role="main" class="ui-content">!-->
        <div id="one" class="ui-body-d ui-content">
            <ul id="autocomplete" data-role="listview" class="ui-listview-outer" data-inset="true" data-filter="true" data-filter-placeholder="enter 3 or more alphabets...for ex : america " data-filter-theme="a"></ul>
        </div>
     </div>

$(document).on("pagecreate", "#startseite", function () {
    $(document).on("click", "li", function () {
        var text = $(this).text();
        $(this).closest("ul").prev("form").find("input").val(text);    });
    $("#autocomplete").on("filterablebeforefilter", function (e, data) {
        var $ul = $(this),
            $input = $(data.input),
            value = $input.val(),
            html = "";
        $ul.html("");
        if (value && value.length > 2) {
            $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
            $ul.listview("refresh");
            $.ajax({
                url: "http://gd.geobytes.com/AutoCompleteCity",
                dataType: "jsonp",
                crossDomain: true,
                data: {
                    q: $input.val()
                }
            })
                .then(function (response) {
                $.each(response, function (i, val) {
                    html += "<li data-role='collapsible' data-iconpos='right' data-shadow='false' data-corners='false'><h2>Birds</h2>" + val + "</li>";
                });
                $ul.html(html);
                $ul.listview("refresh");
                $ul.trigger("updatelayout");
            });
        }
    });
});