动态获取数据时，Jquerymobile 过滤器列表视图不起作用

Question

动态获取数据时，Jquerymobile 过滤器列表视图不起作用

使用 url getfilms.php 显示数据的代码

var xmlhttp = new XMLHttpRequest();
    var url = "./getfilms.php";
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            myFunction(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();

    function myFunction(response) {
        var arr = JSON.parse(response);
        //var arr = obj.records;
        var i;
        var out = "";
        for (i = 0; i < arr.length; i++) {
            out += "<li><a href ='" + arr[i].Path + "'>" + arr[i].Film + "</a></li>";
        }
        document.getElementById("searchfilmsbyname").innerHTML = out;
    }

使用id="searchfilmsbyname"在html端显示listview的代码

<ul data-role="listview"  data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search films..." data-inset="true" id="searchfilmsbyname">

</ul>

Answer 1

使用下面的代码。向 listview 添加动态数据时使用$( ".selector" ).listview( "refresh" ); 方法。在这里阅读更多关于refresh

 function myFunction(response) {
    var arr = JSON.parse(response);
    //var arr = obj.records;
    var i;
    var out = "";
    for (i = 0; i < arr.length; i++) {
        out += "<li><a href ='" + arr[i].Path + "'>" + arr[i].Film + "</a></li>";
     if((i+1) == arr.length){
         document.getElementById("searchfilmsbyname").innerHTML = out;
         //  $("#searchfilmsbyname").html( out );  you can use this jquery method to add html inside list view
         $("#searchfilmsbyname").listview('refresh');
       }
    }

}