Question

我创建了一个自定义JS搜索过滤器。逐字母搜索标记名“ h2”。例如：<h2>CHOCOLATE MOUSSE</h2>，<h2>SMOKED LAMB WITH RICE</h2>

在搜索栏上输入“ mo”时，两个“ display = block”。键入“ mou”时，第一个显示“ block”，第二个显示“ none”；

这是我的HTML代码。

<!DOCTYPE html>
<html>
  <head>
    <link href='style.css' rel='stylesheet' type='text/css'/>
    <script src="./chat.js"></script>
  </head>
  <body>
    <div class="col">
        <div id="search-box">
            <input type="text" placeholder="Search" class="input">
        </div>     
</div>
<main>          
    <div class="recipe a">
        <h2>CHOCOLATE MOUSSE</h2>
        <p class="description">
            This delicious chocolate mousse will delight dinner guests of all ages!</p>
    </div>
    <div class="recipe b">
        <h2>SMOKED LAMB WITH RICE</h2>
        <p class="description">
            Want to feel like your favorite relative came over and made you dinner? This comfort meal of smoked lamb and rice will quickly become a weekend favorite!
        </p>
    </div>
    <div class="recipe c">
        <h2>GOAT CHEESE SALAD</h2>
        <p class="description">
            In addition to the full flavor of goat cheese, this salad includes kale, avocado, and farro to balance it out.</p>
    </div>
</main>

这是我的JavaScript函数

const searchBar = document.forms['search-box'].querySelector('input');
searchBar.addEventListener('keyup',function(e){
    const term = e.target.value.toLowerCase();
    const words = list.getElementsByTagName('h2');
    Array.from(words).forEach(function(word){
        const title = word.firstElementChild.textContent;
            if(title.toLowerCase().includes(term)!= -1){
            word.style.display = 'block';
        } else {
            word.style.display = 'none';
        }
    })
})

为什么JavaScript代码对HTML无效？谢谢!!!!!

Answer 1

const searchBar = document.querySelector('div#search-box > input');

searchBar.addEventListener('keyup',function(e){
    let term = e.target.value.toLowerCase();
    let words = document.querySelectorAll('div.recipe > h2');

    Array.from(words).forEach(function(word){
        let title = word.textContent;
        if(title.toLowerCase().includes(term)){
            word.parentElement.style.display = 'block';
        } else {
            word.parentElement.style.display = 'none';
        }
    });
});

    <!DOCTYPE html>
    <html>
      <head>
        <link href='style.css' rel='stylesheet' type='text/css'/>
        <script src="./chat.js"></script>
      </head>
      <body>
        <div class="col">
          <div id="search-box">
            <input type="text" placeholder="Search" class="input">
          </div>     
        </div>
        <main>          
          <div class="recipe a">
            <h2>CHOCOLATE MOUSSE</h2>
            <p class="description">
            This delicious chocolate mousse will delight dinner guests of all ages!</p>
          </div>
          <div class="recipe b">
            <h2>SMOKED LAMB WITH RICE</h2>
            <p class="description">
            Want to feel like your favorite relative came over and made you dinner? This comfort meal of smoked lamb and rice will quickly become a weekend favorite!</p>
          </div>
          <div class="recipe c">
            <h2>GOAT CHEESE SALAD</h2>
            <p class="description">
            In addition to the full flavor of goat cheese, this salad includes kale, avocado, and farro to balance it out.</p>
          </div>
        </main>
      </body>
    </html>

在您的普通JS中发现了几个问题：

您的搜索框不是表单，而是在div标签中。解决方案：直接在搜索框的输入字段上使用document.querySelector。
'list'变量没有在任何地方声明，但是从您的语法来看，我认为您正在预料一系列项目并从其h2标签提取文本。解决方案：使用document.querySelectorAll查找配方div中的所有h2实例。
要从h2标签获取文本，您可以通过.textContent直接访问它。
string.includes（）->返回一个布尔值，该布尔值由if函数直接求值。这意味着删除'！= -1'
隐藏元素机制已关闭，因为word（h2）被div元素包装。解决方案：使用.parentElement获取div元素，并将div的样式设置为none / block。
始终尽可能使用'let'关键字来避免作用域怪物->那将是一个单独的主题。：D

JavaScript搜索引擎不起作用

1 个答案: