我在这里使用 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"] + " | <span class='postcode'>" + loc["Postcode"] + "</span> | <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>
最佳答案
<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"] + " | <span class='postcode'>" + loc["Postcode"] + "</span> | <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,而不是动态创建的。
关于javascript - 使用 list.js 排序/搜索时列表项消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30119551/