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

标签 javascript search backbone.js infinite-scroll

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

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

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

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

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

最佳答案

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

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

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

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

关于javascript - 延迟加载带过滤的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11552577/

相关文章:

javascript - Konvajs - 通过单击 CSS 类选择背景

javascript - ExtJS5 - 图表极坐标 itemclick

php - 使用 MYSQL PHP 按每个单词而不是完整的字符串搜索

php - 在php中将多个表结果合并到一张表中

javascript - 我的第一个主干模型/ View 。我在正确的轨道上吗?

javascript - 如何使用 jquery 中的动态选择选项填充动态输入字段

javascript - 使用 Jasmine 进行 VS、Resharper、Karma 和 AngularJS 模板单元测试

hibernate - 异步搜索

javascript - backbone.js - 简单 View

javascript - 下划线模板不适用于主干 View