blocks|key|1837|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1838|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';
++++++++}
++++});
});|code-block|syntax|javascript|1839|++++<!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>|1840|1841|在您的vanilla+JS中发现了一些问题：|1842|div+|1843|你的搜索框不是一个表单，它在一个div标签中。解决方案:直接在搜索框的输入字段上使用document.querySelector。|unordered-list-item|1844|
|1845|没有在任何地方声明'list‘变量，但是根据您的语法外观，我假设您预期的是一个项目数组，并从它们的h2标记中提取文本。解决方案:使用document.querySelectorAll查找配方div中的所有h2实例。|1846|1847|要从h2标记中获取文本，您可以通过.textContent直接访问它。|1848|1849|string.includes()+->返回一个布尔值，该值由if函数直接计算。这意味着删除'!=+-1‘div隐藏元素机制是关闭的，因为|1850|
(H2)是由|1851|元素包装的。解决方案:使用.parentElement获取div元素，并将div的样式设置为none/block，尽可能使用'let‘关键字，以避免范围怪兽->，这将是一个单独的主题。:D|1852|1853|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1B|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1C|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1D|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1E|8|@]|9|@]|A|$]]|$1|S|3|T|5|P|7|1F|8|@]|9|@]|A|$]]|$1|U|3|R|5|6|7|1G|8|@]|9|@]|A|$]]|$1|V|3|W|5|P|7|1H|8|@]|9|@]|A|$]]|$1|X|3|R|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|P|7|1J|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1K|8|@]|9|@]|A|$]]|$1|12|3|13|5|P|7|1L|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|16|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const searchBar = document.querySelector('div#search-box &gt; input');

searchBar.addEventListener('keyup',function(e){
    let term = e.target.value.toLowerCase();
    let words = document.querySelectorAll('div.recipe &gt; 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';
        }
    });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;link href='style.css' rel='stylesheet' type='text/css'/&gt;
        &lt;script src="./chat.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div class="col"&gt;
          &lt;div id="search-box"&gt;
            &lt;input type="text" placeholder="Search" class="input"&gt;
          &lt;/div&gt;     
        &lt;/div&gt;
        &lt;main&gt;          
          &lt;div class="recipe a"&gt;
            &lt;h2&gt;CHOCOLATE MOUSSE&lt;/h2&gt;
            &lt;p class="description"&gt;
            This delicious chocolate mousse will delight dinner guests of all ages!&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="recipe b"&gt;
            &lt;h2&gt;SMOKED LAMB WITH RICE&lt;/h2&gt;
            &lt;p class="description"&gt;
            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!&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="recipe c"&gt;
            &lt;h2&gt;GOAT CHEESE SALAD&lt;/h2&gt;
            &lt;p class="description"&gt;
            In addition to the full flavor of goat cheese, this salad includes kale, avocado, and farro to balance it out.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/main&gt;
      &lt;/body&gt;
    &lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Few problems were found in your vanilla JS:</p>

<ol>
<li>Your search box is not a form, it's in a div tag.  Solution: use document.querySelector directly on the search box's input field.</li>
<li>The 'list' variable was not declared anywhere, but by the look of your syntax, I assumed you were anticipating an array of items and extract text from their h2 tags.  Solution: use document.querySelectorAll to find all h2 instances inside the recipe divs.</li>
<li>To get the text from the h2 tags, you can directly access it by .textContent. </li>
<li>string.includes() -> returns a boolean value which is directly evaluated by the if function. That means removing '!= -1'</li>
<li>The hiding elements mechanism is off because of word(h2) is wrapped by a div element. Solution: use .parentElement to get the div element and set the style of the div to none/block instead.</li>
<li>Always use 'let' keyword as much as possible to avoid the scope monster -> That would be a separate topic.  :D</li>
</ol>


<p>I created a custom JS search filter. to search tagname 'h2' letter by letter. 
For example: <code>&lt;h2&gt;CHOCOLATE MOUSSE&lt;/h2&gt;</code>, <code>&lt;h2&gt;SMOKED LAMB WITH RICE&lt;/h2&gt;</code></p>

<p>When typing "mo" on search bar, both "display = block". When typing "mou", first one "display = block", second "display = none";</p>

<p>Here is my HTML code.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;link href='style.css' rel='stylesheet' type='text/css'/&gt;
    &lt;script src="./chat.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="col"&gt;
        &lt;div id="search-box"&gt;
            &lt;input type="text" placeholder="Search" class="input"&gt;
        &lt;/div&gt;     
&lt;/div&gt;
&lt;main&gt;          
    &lt;div class="recipe a"&gt;
        &lt;h2&gt;CHOCOLATE MOUSSE&lt;/h2&gt;
        &lt;p class="description"&gt;
            This delicious chocolate mousse will delight dinner guests of all ages!&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="recipe b"&gt;
        &lt;h2&gt;SMOKED LAMB WITH RICE&lt;/h2&gt;
        &lt;p class="description"&gt;
            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!
        &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="recipe c"&gt;
        &lt;h2&gt;GOAT CHEESE SALAD&lt;/h2&gt;
        &lt;p class="description"&gt;
            In addition to the full flavor of goat cheese, this salad includes kale, avocado, and farro to balance it out.&lt;/p&gt;
    &lt;/div&gt;
&lt;/main&gt;
</code></pre>

<p></p>

<p></p>

<p>Here is my javascript function</p>

<pre><code>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';
        }
    })
})
</code></pre>

<p>Why javascript code does nothing on my HTML? 
Thank you!!!!!</p>


Javascript search engine doesn't work

我创建了一个自定义的JS搜索过滤器。要逐个字母搜索标记名'h2‘。例如：<h2>CHOCOLATE MOUSSE</h2>、<h2>SMOKED LAMB WITH RICE</h2>当在搜索栏上输入"mo“时，"display = block”。当输入"mou“时，第一个是"display = block"，第二个是...

问Javascript搜索引擎无法工作
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript搜索引擎无法工作EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript搜索引擎无法工作
EN