使用 Javascript 条件流实现 Web 搜索栏

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

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

方法：

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

例子：

  

    
    
  
    
    
  
    
        GeeksforGeeks Search Bar 
    

  

    * {
        margin: 0;
        padding: 0;
    }
  
    .container {
        box-sizing: border-box;
    }
  
    header {
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: space-evenly;
        background: #d87093;
        padding: 0.5rem 1rem;
    }
  
    h3 {
        color: #000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.98rem;
    }
  
    input[type='search'] {
        padding: 0.5rem 2rem 0.5rem 0.4rem;
        border-radius: 4rem;
        font-size: 0.98rem;
    }
  
    .movieCollection {
        width: 100%;
        margin: 0 auto;
        padding: 1rem;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        font-family: -apple-system, 
            BlinkMacSystemFont,
            'Segoe UI', Roboto, Oxygen,
            Ubuntu, Cantarell, 'Open Sans',
            'Helvetica Neue', sans-serif;
    }
  
    .movieWrapper {
        margin-top: 1.5rem;
    }
  
    img {
        width: 400px;
        height: 400px;
        display: block;
    }

  
  

    
        
            Geeks4Geeks Search Bar
  
            
        
  
        
            
                The city gate
                01.02.1999
                
            
  
            
                Land of scientist
                01.02.2000
                
            
  
            
                Hidden treasure
                01.02.2010
                
            
  
            
                Beautiful city of heroes
                01.02.2020
                
            
  
            
                The city gate
                01.02.1999
                
            
  
            
                Land of scientist
                01.02.2000
                
            
        
    
  
    
        document.addEventListener('DOMContentLoaded', () => {
  
            const getSearchBar = 
                document.querySelector('#searchBar');
            const getAllMovies = 
                document.querySelectorAll('.movieWrapper');
  
            getSearchBar.addEventListener('keyup', e => {
                getAllMovies.forEach(movie => {
                    if (movie.innerText.toLowerCase().includes(
                        e.target.value.toLowerCase())) {
                        movie.style.display = 'block';
                        return movie;
                    }
                    else {
                        movie.style.display = 'none';
                    }
                });
            });
        });
    

  

输出：

脚本标签内的代码说明：

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

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