javascript - 使用 list.js 排序/搜索时列表项消失

Question

我在这里使用 list.js 构建了一个位置搜索小部件:http://tonic-agencyhq.co.uk/locations.php

问题是每当我搜索/排序时，所有列表项都会消失。如果我将项目添加为实际的 HTML 元素，它工作得很好，但我目前正在使用一些 jQuery+JSON 来生成项目。

我使用的代码:

<div id="locations">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="location-title">Sort by Title</button>
  <button class="sort" data-sort="organisation">Sort by Organisation</button>
  <button class="sort" data-sort="city">Sort by City</button>
  <ul class="list" id="locations-list"></ul>
</div>

<script src="content/themes/tui/assets/js/jquery.min.js"></script>

<script>

    var $locations = $("#locations-list");
 
    $.getJSON("content/themes/tui/assets/json/locations.json", function (locations) {
        $.each(locations, function(i, loc) {
            var $li = $("<li><h3 class='location-title'>" + loc["Location Title"] + "</h3><p class='organisation'>" + loc["Organisation"] + "</p><p class='address'>" + loc["Address"] + "</p><span class='city'>" + loc["City"] + "&nbsp;|&nbsp;<span class='postcode'>" + loc["Postcode"] + "</span>&nbsp;|&nbsp;<span class='country'>" + loc["Country"] + "</span></li>");
            $locations.append($li);
        });
    }); 

</script>

<script src="content/themes/tui/assets/js/list.min.js"></script>

<script>

var options = {
  valueNames: [ 'location-title', 'organisation' , 'city' ]
};

var locationsList = new List('locations', options);

</script>

Answer 1

<script>

var $locations = $("#locations-list");

$.getJSON("content/themes/tui/assets/json/locations.json", function (locations) {
    $.each(locations, function(i, loc) {
        var $li = $("<li><h3 class='location-title'>" + loc["Location Title"] + "</h3><p class='organisation'>" + loc["Organisation"] + "</p><p class='address'>" + loc["Address"] + "</p><span class='city'>" + loc["City"] + "&nbsp;|&nbsp;<span class='postcode'>" + loc["Postcode"] + "</span>&nbsp;|&nbsp;<span class='country'>" + loc["Country"] + "</span></li>");
        $locations.append($li);
    });

var options = {


 valueNames: [ 'location-title', 'organisation' , 'city' ]
};

var locationsList = new List('locations', options);
}); 

您的 Ajax 调用在这里是异步的，将列表创建移动到其中。动态列表 ($locations.append()) 未传递给 list.js。这就是为什么您在排序后只能看到静态创建的 UL，而不是动态创建的。