在使用list.js进行排序/搜索时消失列表项 [英] Disappearing list items when sorting/searching w/ list.js

问题描述

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

I've built a location search widget using list.js here: http://tonic-agencyhq.co.uk/locations.php

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

The problem is whenever I search/sort all of the list items disappear. It works fine if I add items in as actual HTML elements but I'm currently using some jQuery+JSON to generate the items.

我使用的代码:

<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>

推荐答案

<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而没有动态创建的原因.

Your Ajax call is asynchronous here, move list creation inside this. The dynamic list ($locations.append()) are not getting passed to list.js. That is why you only seeing staically created UL after sort and not dynamically created.

这篇关于在使用list.js进行排序/搜索时消失列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！