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

스택 오버플로에 오신 것을 환영합니다!

스 니펫은 색인을 생성하고 해당 색인에 문서를 추가합니다. 색인은 검색을 수행하는 객체이며 추가 한 문서를 전체 텍스트 검색이 가능하도록 저장합니다.

검색 기능을 제공하려는 모든 페이지에 코드를 입력해야하지만 검색 할 문서를 추가해야합니다.

그런 다음, 당신은 검색을 수행하는 사용자를 허용하는 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