无法从数组中取出对象进行显示

Question

我正在尝试为我创建的数据集构建一个简单的搜索界面。

我已经按照 Lunr guides 创建了一个索引。我在我的网页上放置了一个输入框，用于获取用户键入的搜索值，然后运行将该值与索引进行比较。

当我运行 console.log(results[0]) - 我很高兴在我的控制台中得到正确的结果：

当我试图让 "legal and legislation compliance" 出现在我的网页上时，问题就来了。发生了两件事：

当我尝试将 console.log(results[0].ref) 输出到控制台时，程序冻结并且我无法再输入。

当我尝试将 document.getElementById("demo").innerHTML= results[0] 输出到网页时，我得到了 [object object] - 这令人惊讶，因为控制台行提供了与对象关联的实际数据。

var documents = [{
    "TooltipInfo": "administration - administration general: 2 years 5 years de: ",
    "Category": "None1",
  },
  {
    "TooltipInfo": "administration - appointment books, diaries, desk calendars: 1 years 0 years de: ",
    "Category": "None2",
  },
  {
    "TooltipInfo": "administration - correspondance day files: 1 years 0 years de: ",
    "Category": "None3",
  },
  {
    "TooltipInfo": "legislation and directives - general: 2 years 0 years de: ",
    "Category": "Legal & Legislative Compliance",
  }
]

var idx = lunr(function() {
  this.ref('Category')
  this.field('TooltipInfo')

  documents.forEach(function(doc) {
    this.add(doc)
  }, this)
})



var searchInput = document.querySelector('#search-input')
searchInput.addEventListener('keyup', function() {
  var results = idx.search(searchInput.value)
  // console.log(results[0].ref)

  // var results2 = results.forEach(function(item){return item})
  document.getElementById("demo").innerHTML = results[0]
})

<script src="https://unpkg.com/lunr/lunr.js"></script>
<input type="search" id="search-input" placeholder="Search">

<p id="demo"></p>

如何让搜索结果显示在我的网页上？

Answer 1

您应该使用 innerHTML 的值。这里 results[0] 是一个对象。所以这应该是 document.getElementById("demo").innerHTML = results[0].ref

var documents = [{
    "TooltipInfo": "administration - administration general: 2 years 5 years de: ",
    "Category": "None1",
  },
  {
    "TooltipInfo": "administration - appointment books, diaries, desk calendars: 1 years 0 years de: ",
    "Category": "None2",
  },
  {
    "TooltipInfo": "administration - correspondance day files: 1 years 0 years de: ",
    "Category": "None3",
  },
  {
    "TooltipInfo": "legislation and directives - general: 2 years 0 years de: ",
    "Category": "Legal & Legislative Compliance",
  }
]

var idx = lunr(function() {
  this.ref('Category')
  this.field('TooltipInfo')

  documents.forEach(function(doc) {
    this.add(doc)
  }, this)
})



var searchInput = document.querySelector('#search-input')
searchInput.addEventListener('keyup', function() {
  var results = idx.search(searchInput.value)
  //console.log(results[0])

  // var results2 = results.forEach(function(item){return item})
  document.getElementById("demo").innerHTML = results[0].ref;
})

<script src="https://unpkg.com/lunr/lunr.js"></script>
<input type="search" id="search-input" placeholder="Search">

<p id="demo"></p>

无法从数组中取出对象进行显示

Can't get object out of array for display

html

javascript

lunrjs