ReferenceError:在实现搜索引擎时未定义文档js的

Question

片段：我需要实现一个搜索引擎来搜索产品。我创建了一些json对象产品。id productsList表示将在搜索结果中显示的列表，id searchBar表示搜索栏，我在所有html文件中添加了带有其id的元素搜索栏，因为搜索栏总是显示在应用程序中

html片段：该文件包含id"；productsList"；

let products= [
{"name": "iphone", "img":"/ip hone.jpg", "category":"phones"},
{"name": "galaxy", "img":"/galaxy.jpg","category":"phones"},
{"name": "tennis raquet", "img":"/tennis.jpg","category":"sports"},
{"name": "boxing bag", "img":"/boxing.jpg","category":"sports"},
{"name": "the sun and her flowers", "img":"/sun.jpg","category":"books"},
{"name": "leaves of grass", "img":"/leaves.jpg","category":"books"},
]
;
var productsList= document.getElementById('productsList');
var SearchBar= document.getElementById ('searchBar');**
SearchBar.addEventListener('keyup', (e)=>{
const searchString=e.target.value;
const filteredProducts= products.filter((product)=>{
return (
product.name.includes(searchString)|| product.category.includes(searchString)
);
});
displayProducts(filteredProducts);
});
const displayProducts= (products) => {
const htmlString=characters.map((product) =>{
return '<li class="product" <h2> ${product.name} </h2> <p> category: ${product.category}</p> <img src="${product.img}"></img> </li>';
}
)
.join('');
productsList.innerHTML= htmlString;
};

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-2">
<a class="navbar-brand" style="color: rgb(191, 255, 161)">Search Results</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" id="productsList">
</ul>
<form method="POST" action='/search' class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" name="Search" type="search" placeholder="Search"
aria-label="Search" id="searchBar">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src= "app.js"></script>
<script type="module"></script>

我一直收到参考错误。请帮助

Answer 1

从SearchBar行中删除**后，主要问题是找不到characters，通过将其更改为属性products，可以正确映射。

其次，我在searchString中添加了一个null检查，以防从HTML中提取目标值时出现问题。

以下是工作代码：https://stackblitz.com/edit/js-ctaqcu?file=index.js

let products = [
{ name: 'iphone', img: '/ip hone.jpg', category: 'phones' },
{ name: 'galaxy', img: '/galaxy.jpg', category: 'phones' },
{ name: 'tennis raquet', img: '/tennis.jpg', category: 'sports' },
{ name: 'boxing bag', img: '/boxing.jpg', category: 'sports' },
{ name: 'the sun and her flowers', img: '/sun.jpg', category: 'books' },
{ name: 'leaves of grass', img: '/leaves.jpg', category: 'books' },
];
var productsList = document.getElementById('productsList');
var SearchBar = document.getElementById('searchBar');
SearchBar.addEventListener('keyup', (e) => {
const searchString = e.target.value;
if (searchString) {
const filteredProducts = products.filter((product) => {
return (
product.name.includes(searchString) ||
product.category.includes(searchString)
);
});
displayProducts(filteredProducts);
}
});
const displayProducts = (products) => {
const htmlString = products
.map((product) => {
return '<li class="product" <h2> ${product.name} </h2> <p> category: ${product.category}</p> <img src="${product.img}"></img> </li>';
})
.join('');
productsList.innerHTML = htmlString;
};

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-2">
<a class="navbar-brand" style="color: rgb(191, 255, 161)">Search Results</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" id="productsList"></ul>
<form method="POST" action="/search" class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
name="Search"
type="search"
placeholder="Search"
aria-label="Search"
id="searchBar"
/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</nav>