Question

我知道我没有任何代码示例，但这是因为我不确定如何继续。

我正在使用jQuery和Bootstrap构建一个站点，并将显示大约7000多个项目的列表。

我正在使用$ .getJSON（...）来获取PostgreSQL数据库中的项目列表。这个电话非常快。

我想创建一个能够进行类型搜索/过滤的列表，其中显示的元素对应于用户正在键入的内容。

我不想多次调用我的PostgreSQL数据库 - 如果可能的话 - 但也不想用DOM元素等杀死浏览器。

最好的方法是什么，Bootstrap中是否存在任何现有组件或......？

Answer 1

ForerunnerDB将是一个很好用的库：http://forerunnerdb.com/

它是客户端NoSQL db。您可以将数据插入collection并创建一个可以处理数据到DOM的自动绑定的视图。加载超过7000个DOM元素是一项艰巨的任务，延迟加载可能是您的前进方向;我的建议是一次显示100条记录，当用户接近列表底部时，触发更多要呈现的DOM元素：

//Take data from a collection, query it to build a view, and link it to the DOM
db.view('dataView')
  .query({
      /*
       * Filter documents in the collection
       * calling db.view('dataView').find() will now only pull records from the 'data' collection which contain a key `verified` that have the value 'true'
       */
      verified: true
  })
  .queryOptions({
      //Apply options 
      //calling db.view('dataView').find() will limit the result to the first hundred records
      $limit: 100
  })
  .from('data')
  .link('#targetElement', 'templateName');

要取消关联视图，请再次致电db.view('dataView').unlink()。

如果要渲染更多记录，只需执行以下操作：

var query = db.view('dataView').query();
query.$limit += 100;
db.view('dataView').query(query)

这将自动呈现下一百条记录。

使用.query({})和.queryOptions({})的组合，您可以以任何方式操纵视图的数据，我已经能够构建一些复杂的过滤并使用这种技术轻松搜索。

带有search / typeahead的jQuery，Bootstrap和大列表（7000多个项目）

1 个答案: