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

Добро пожаловать в переполнение стека!

Урок, который вы создаете, и добавляет документы к этому индексу. Индекс - это объект, к которому вы выполняете поиск, он сохраняет документы, которые вы добавляете, таким образом, чтобы возможен полный текстовый поиск.

Вы должны поместить этот код (но добавить документы, которые хотите выполнить поиск) на каждой странице, которую вы хотите предоставить для поиска.

Затем вам необходимо предоставить какой-то пользовательский интерфейс для предоставления пользователю выполнить поиск:

<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