📌  相关文章
📜  使用 Javascript 条件流实现 Web 搜索栏

📅  最后修改于: 2021-08-31 02:30:16             🧑  作者: Mango

给定一个项目列表，任务是过滤项目并使用搜索栏返回最佳匹配项。

有几种方法可以实现这一点，但我们将使用一个简单的if-else语句来实现我们的搜索栏。

方法：

  • 创建一个名为gfgSearchBar的文件夹。
  • 在所需的 IDE 或 IDLE 中打开文件夹。
  • 创建一个名为approachOne.html 的 html 文件
  • 将以下代码粘贴到 html 文件中。

例子： 



  

    
    
  
    
    
  
    
        GeeksforGeeks Search Bar 
    

  

  
  

    

        

            
Geeks4Geeks Search Bar

  
            
        

  
        

            

                
The city gate

                
                
            

  
            

                
Land of scientist

                
                
            

  
            

                
Hidden treasure

                
                
            

  
            

                
Beautiful city of heroes

                
                
            

  
            

                
The city gate

                
                
            

  
            

                
Land of scientist

                
                
            

        

    

  
    

  

输出：

脚本标签内的代码说明：

  • document.addEventListener(‘DOMContentLoaded’);这是一个文档事件，它会在 html 文件加载到浏览器上后立即执行或触发。在 html 文件完全加载到 DOM 之前，不会执行此事件块内的操作。
  • const getSearchBar = document.querySelector(‘#searchBar’);我们只是获取了搜索栏元素并将其传递给getSearchBar变量。
  • const getAllMovies = document.querySelectorAll(‘.movieWrapper’);我们只是简单地获取了所有电影 div，然后将其传递给 getAllMovies 变量。请注意， getAllMovies 是一个Nodelist元素，它是一个Array ，而不是Array 。

    getSearchBar.addEventListener()：我们只是在搜索栏中添加了一个 keyup 事件监听器。 

    getAllMovies.forEach(movie => {
    if (movie.innerText.toLowerCase()
    .includes(e.target.value.toLowerCase())) {
        movie.style.display = 'block';
        return movie;
    }
    else {
        movie.style.display = 'none';
    }
});

    这段代码只是意味着用户在搜索栏中键入的内容存在于电影文本内容中，然后设置要以块显示的电影框的样式并返回所有内容。否则不要返回任何电影块。