gpt4 book ai didi

javascript - 无法从数组中获取对象进行显示

转载 作者:行者123 更新时间:2023-12-02 23:16:13 27 4
gpt4 key购买 nike

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

我已经关注了 Lunr guides创建索引。我在网页上放置了一个输入框,用于获取用户输入的搜索值,然后针对索引运行该值。

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

screenshot of a line from the console: object {ref: "Legal & Legislation Compliance", score:1.2, matchData: {..}

当我尝试让“法律和法规合规性”显示在我的网页上时,问题就出现了。发生了两件事:

当我尝试将 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>

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

最佳答案

您应该使用 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>

关于javascript - 无法从数组中获取对象进行显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57154322/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com