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

def any_view(request):
    retdict = {'articles': Article.objects.all(),}
    return render_to_response("template.html", retdict, context_instance=RequestContext(request))

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.

排序/搜索w / list.js时消失的列表项

1 个答案: