javascript - 延迟加载带过滤的项目

Question

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

同时，我希望在顶部有一个输入字段，当您输入名称时，它会过滤匹配的项目。

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

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

编辑:这里的真实场景是加载你所有的 facebook 好友，这可能非常慢，并将它们与其他 api 混在一起。我不想一次全部加载，因为体验会延迟。

Answer 1

当用户正在搜索时，为什么不使用包含过滤器的提取来重置集合？

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

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

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