Jquery mobile Collabsible Listview没有更新

Question

我正在尝试用collapsible list view 来做remote autocomplete。 .它适用于普通列表视图..但是当我使用可折叠列表视图时它不起作用。请看演示。 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>

我的 javascript

$(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");
            });
        }
    });
});

http://jsfiddle.net/Q8dBH/8/

Answer 1

工作示例：http://jsfiddle.net/Gajotres/Q8dBH/10/

用途：

$('#startseite').enhanceWithin();

代替：

$ul.listview("refresh");
$ul.trigger("updatelayout");

基本上，在 jQuery Mobile 1.4 之前，每个小部件都有自己的增强方法，而有两种内容范围的增强方法（不幸的是，它们并不总是成功的）。 jQuery Mobile 1.4 带来了名为 enhanceWithin() 的新函数，用于增强内容，特别是在创建超过 1 个动态小部件时。在您的情况下，您有 2 个小部件，列表视图和可折叠，因此 listview("refresh") 还不够。

更新：

如果您想消除间隙，请使用此 CSS：

.ui-listview > li h1, .ui-listview > li h2, .ui-listview > li h3, .ui-listview > li h4, .ui-listview > li h5, .ui-listview > li h6 {
    margin: 0 !important;
}

或者在可折叠集合中创建所有内容。

Answer 2

如果控件加载了ajax，你将不得不使用：

$(document).on('filterablebeforefilter','#autocomplete',function(e,data){
   ...
})