jQuery，Bootstrap和大列表(7000 +项目）与搜索/输入提前

jQuery, Bootstrap and big list (7000+ items) with search/typeahead

本文关键字：搜索 输入 项目 Bootstrap 列表 7000 jQuery      更新时间：2023-09-26

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

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

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

我想创建一个能够提前输入搜索/过滤的列表，其中显示与用户正在键入的元素相对应。

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

继续的最佳方法是什么，Bootstrap 中是否有任何现有组件或...？

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

它是一个客户端NoSQL数据库。您将能够将数据插入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({})将允许您以几乎任何您想要的方式操作视图的数据，我已经能够使用这种技术轻松构建一些复杂的过滤和搜索。

相关文章：