Lunr.js 索引？

Question

我最近开始了一个网络项目，我必须在我的网站上实现一个搜索按钮，但在客户端。所以我找到了lunr.js。我的问题是..如何索引页面？是的，我确实知道他们网站上写的演习..不过，还不够清楚..我在哪里实施该脚本？（见下文）我用什么？？

var index = lunr(function () {
  this.field('title', {boost: 10})
  this.field('body')
  this.ref('id')
})

index.add({
  id: 1,
  title: 'Foo',
  body: 'Foo foo foo!'
})

index.add({
  id: 2,
  title: 'Bar',
  body: 'Bar bar bar!'
})

我应该把这段代码放在哪里？我显然不知道。

Answer 1

欢迎来到 Stack Overflow！

您的代码片段创建了一个索引，并将文档添加到该索引。索引是您执行搜索的对象，它以一种可以进行全文搜索的方式存储您添加的文档。

您应该将该代码（但添加您要搜索的文档）放在您希望提供搜索功能的每个页面上。

然后，您需要提供某种 UI 以允许用户执行搜索：

<input type="search" id="search-input" placeholder="Search">

现在，只要用户在搜索框中键入内容，您就希望对 lunr 执行搜索：

var searchInput = document.querySelector('#search-input')
searchInput.addEventListener('keyup', function () {
  var results = index.search(searchInput.value)
  // do something with the results (maybe display them)
})

以上内容非常简单，但希望足以让您入门。您可以在 lunr docs page

上看到另一个正在使用的示例

Lunr.js 索引？

Lunr.js indexing?

javascript

indexing

web

lunrjs