ReferenceError：实现搜索引擎时未定义文档

Question

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

sn-p of 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 添加了一个空检查，以防从 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>