延迟加载带过滤的项目 [英] Lazy load items with filtering

问题描述

我正在使用Backbone.js在页面上一次加载20个项目，当你向下滚动到底部时获取更多项目，直到没有剩余的项目从服务器获取。

I am using Backbone.js to load 20 items at a time on the page, getting more items when you scroll down to the bottom until there are none left to fetch from the server.

与此同时，我想要一个输入字段，当你输入一个名字时，它会过滤掉匹配的项目。

At the same time, I want an input field up top that as you type a name, it filters the items that match.

问题是，如果您还没有滚动到底部并获取完整集，则输入过滤器将仅匹配当前页面上的项目。

The issue is, if you haven't scrolled to the bottom yet and fetched the full set, the input filter will only match the items that are currently on the page.

什么是技术上和视觉上的最佳解决方案，将UI过滤与延迟加载的项目相结合？

What is the best solution technically and visually for combining UI filtering with lazy loaded items?

编辑：
这里的真实场景是加载你所有的facebook朋友，这可能非常慢慢地将它们与其他api混合在一起。我不想一次加载所有因为经验延迟。

The real scenario here is loading all of your facebook friends which can be very slow and mashing them up with other apis. I did not want to load all at once because the experience is delayed.

推荐答案

当用户搜索时，为什么不重置包含过滤器的fetch集合？

When a user is searching, why not reset the collection with a fetch that includes a filter?

Collection.fetch（{term：$（＃search）。val（）}）

Collection.fetch({ term : $("#search").val()})

如果您为此集合设置后端API端点，以使用术语params来调整结果范围，那么您的集合将仅包含来自服务器的与用户输入匹配的结果。

If you setup your backend API end point for this collection to scope your results by the term params, then your collection would only contain results from the server that match the user input.

您还可以将初始提取限制为用户输入的前3个字符，然后在继续输入时执行其余的过滤客户端。也就是说，如果您没有在第一次通话时限制搜索结果服务器端。

You could also limit the initial fetch to the first 3 characters the user enters then do the rest of your filtering client side as they continue to type. That is if you aren't limiting the search results server side with your first call.

这篇关于延迟加载带过滤的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！