首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Javascript搜索引擎无法工作

Javascript搜索引擎无法工作
EN

Stack Overflow用户
提问于 2018-06-24 15:50:58
回答 1查看 172关注 0票数 0

我创建了一个自定义的JS搜索过滤器。要逐个字母搜索标记名'h2‘。例如:<h2>CHOCOLATE MOUSSE</h2><h2>SMOKED LAMB WITH RICE</h2>

当在搜索栏上输入"mo“时,"display = block”。当输入"mou“时,第一个是"display = block",第二个是"display = 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上什么也不做?谢谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-25 03:38:36

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>

在您的vanilla JS中发现了一些问题:

div

  • 你的搜索框不是一个表单,它在一个div标签中。解决方案:直接在搜索框的输入字段上使用document.querySelector。

  • 没有在任何地方声明'list‘变量,但是根据您的语法外观,我假设您预期的是一个项目数组,并从它们的h2标记中提取文本。解决方案:使用document.querySelectorAll查找配方div中的所有h2实例。

  • 要从h2标记中获取文本,您可以通过.textContent直接访问它。

  • string.includes() ->返回一个布尔值,该值由if函数直接计算。这意味着删除'!= -1‘div隐藏元素机制是关闭的,因为

(H2)是由

  • 元素包装的。解决方案:使用.parentElement获取div元素,并将div的样式设置为none/block,尽可能使用'let‘关键字,以避免范围怪兽->,这将是一个单独的主题。:D
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51007949

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档