欢迎来到雄杰鑫电商资讯网
技术教程

JavaScript与HTML交互：构建实时职位搜索功能

DDD 次阅读

本文详细介绍了如何将html输入框与javascript数据过滤功能相结合，实现一个实时的职位搜索应用。通过利用`document.getelementbyid`获取用户在输入框中键入的值，并将其作为参数传递给javascript函数，我们能够对预定义的工作列表进行动态、大小写不敏感的筛选，最终在控制台输出匹配结果及数量。

构建基础HTML搜索界面

要实现用户交互式的搜索功能，首先需要一个包含输入字段和触发按钮的HTML界面。用户将在此输入他们感兴趣的职位名称和地点。

在这个结构中，我们定义了两个文本输入框，分别用于职位标题和地点，并为它们分配了唯一的id（titleInput和locationInput），以便JavaScript能够准确地获取它们的值。一个按钮被用于触发搜索操作，其onclick事件绑定了一个名为searchJobs()的JavaScript函数。

定义职位数据与搜索逻辑

在前端应用中，数据通常以数组或对象的形式存在。这里我们使用一个包含多个职位对象的数组作为示例数据源。每个职位对象都包含title和location属性。

const jobs = [{
    title: "Marketing Intern",
    location: "US, NY, New York"
  },
  {
    title: "Customer Service - Cloud Video Production",
    location: "NZ, Auckland",
  },
  {
    title: "Commissioning Machinery Assistant (CMA)",
    location: "US, IA, Wever",
  },
  {
    title: "Account Executive - Washington DC",
    location: "US, DC, Washington",
  },
  {
    title: "Bill Review Manager",
    location: "US, FL, Fort Worth"
  },
  {
    title: "Accounting Clerk",
    location: "US, MD,"
  },
  {
    title: "Head of Content (m/f)",
    location: "DE, BE, Berlin"
  },
  {
    title: "Lead Guest Service Specialist",
    location: "US, CA, San Francisco",
  },
  {
    title: "HP BSM SME",
    location: "US, FL, Pensacola"
  },
  {
    title: "Customer Service Associate - Part Time",
    location: "US, AZ, Phoenix",
  },
  {
    title: "ASP.net Developer Job opportunity at United States,New Jersey",
    location: "US, NJ, Jersey City",
  },
  {
    title: "Talent Sourcer (6 months fixed-term contract)",
    location: "GB, LND, London",
  },
  {
    title: "Applications Developer, Digital",
    location: "US, CT, Stamford",
  },
  {
    title: "Installers",
    location: "US, FL, Orlando"
  },
  {
    title: "Account Executive - Sydney",
    location: "AU, NSW, Sydney"
  },
  {
    title: "VP of Sales - Vault Dragon",
    location: "SG, 01, Singapore",
  },
  {
    title: "Hands-On QA Leader",
    location: "IL, Tel Aviv, Israel"
  },
  {
    title: "Southend-on-Sea Traineeships Under NAS 16-18 Year Olds Only",
    location: "GB, SOS, Southend-on-Sea",
  },
  {
    title: "Visual Designer",
    location: "US, NY, New York"
  },
  {
    title: "Process Controls Engineer - DCS PLC MS Office - PA",
    location: "US, PA, USA Northeast",
  },
  {
    title: "Marketing Assistant",
    location: "US, TX, Austin"
  },
  {
    title: "Front End Developer",
    location: "NZ, N, Auckland"
  },
  {
    title: "Engagement Manager",
    location: "AE,"
  },
  {
    title: "Vice President, Sales and Sponsorship (Businessfriend.com)",
    location: "US, CA, Carlsbad",
  },
  {
    title: "Customer Service",
    location: "GB, LND, London"
  },
  {
    title: "H1B SPONSOR FOR L1/L2/OPT",
    location: "US, NY, New York"
  },
  {
    title: "Marketing Exec",
    location: "SG,"
  },
  {
    title: "HAAD/DHA Licensed Doctors Opening in UAE",
    location: "AE, AZ, Abudhabi",
  },
  {
    title: "Talent Management Process Manager",
    location: "US, MO, St. Louis",
  },
  {
    title: "Customer Service Associate",
    location: "CA, ON, Toronto"
  },
  {
    title: "Customer Service Technical Specialist",
    location: "US, MA, Waltham",
  },
  {
    title: "Software Applications Specialist",
    location: "US, KS,"
  },
  {
    title: "Craftsman Associate",
    location: "US, WA, Everett"
  },
  {
    title: "Completion Engineer",
    location: "US, CA, San Ramon"
  },
  {
    title: "I Want To Work At Karmarama",
    location: "GB, LND,"
  },
  {
    title: "English Teacher Abroad",
    location: "US, NY, Saint Bonaventure",
  },
];

/**
 * 根据标题和地点筛选职位列表。
 * @param {Array} jobsData 职位数据数组。
 * @param {string} searchTitle 搜索的职位标题关键词。
 * @param {string} searchLocation 搜索的地点关键词。
 */
function findJobs(jobsData, searchTitle, searchLocation) {
  let count = 0; // 计数器，记录找到的职位数量
  const matchedJobs = []; // 存储匹配的职位

  jobsData.forEach(job => {
    // 将职位标题和地点转换为小写，以便进行大小写不敏感的搜索
    const lowercaseJobTitle = job.title.toLowerCase();
    const lowercaseJobLocation = job.location.toLowerCase();

    // 检查职位标题和地点是否包含搜索关键词
    if (lowercaseJobTitle.includes(searchTitle) && lowercaseJobLocation.includes(searchLocation)) {
      matchedJobs.push(job);
      count++;
    }
  });

  console.log("匹配的职位:", matchedJobs);
  console.log("找到的职位数量:", count);
}
findJobs函数接收职位数据、搜索标题和搜索地点作为参数。它遍历整个jobsData数组，将每个职位的标题和地点都转换为小写，然后使用includes()方法检查它们是否包含搜索关键词。这种方法确保了搜索是大小写不敏感的，提高了用户体验。匹配的职位会被收集起来，并在控制台输出。


实现HTML与JavaScript的交互


关键在于如何将HTML输入框中的值传递给findJobs函数。document.getElementById()是JavaScript中用于获取DOM元素的重要方法。


    

  1. 
获取输入值： 使用document.getElementById('id').value可以获取指定id的输入框的当前值。
    2. 

  2. 
大小写转换： 为了与findJobs函数中的逻辑保持一致，获取到的用户输入也应转换为小写，即.toLowerCase()。
    3. 

  3. 
事件绑定： 在HTML按钮的onclick事件中，直接调用一个包装函数或findJobs函数，并将获取到的输入值作为参数传入。
    4. 



考虑到代码的组织性和可维护性，我们通常会创建一个独立的函数来处理按钮点击事件，该函数负责获取输入值并调用核心搜索逻辑。
// searchJobs 函数负责获取用户输入并调用 findJobs
function searchJobs() {
  // 获取职位标题输入框的值，并转换为小写
  const title = document.getElementById('titleInput').value.toLowerCase();
  // 获取地点输入框的值，并转换为小写
  const location = document.getElementById('locationInput').value.toLowerCase();

  // 调用 findJobs 函数进行搜索
  findJobs(jobs, title, location);
}
现在，HTML按钮的onclick事件只需要调用searchJobs()即可：

  
  
  

完整示例代码


将HTML和JavaScript代码整合到一起，形成一个完整可运行的示例：



    
    
    职位搜索器
    



    
职位搜索


    

        
        
        
    


    
        
        
在此处查看搜索结果。

    

    


在上述完整示例中，我们还添加了一个results div来动态显示搜索结果，而不是仅仅在控制台输出，这提供了更好的用户体验。


注意事项与优化


    

  1. 大小写处理： 始终在搜索前将用户输入和数据源中的文本统一转换为小写（或大写），以确保搜索结果的全面性。
    2. 

  2. 

    用户体验：
    

      

    • 
结果显示： 将搜索结果直接呈现在HTML页面上，而不是仅仅在控制台输出，可以显著提升用户体验。
      • 

    • 
反馈机制： 当没有找到结果时，向用户提供明确的反馈。
      • 

    • 
输入清空： 考虑是否需要在搜索后清空输入框，或在用户再次输入时自动清空旧结果。
      • 

    

    3. 

  3. 

    性能考量：
    

      

    • 对于非常大的数据集，简单的forEach循环可能效率不高。可以考虑使用更高效的数据结构（如Trie树）或更优化的搜索算法。
      • 

    • 如果搜索操作频繁且数据量大，可以考虑引入防抖（Debounce）或节流（Throttle）技术，限制搜索函数的执行频率。
      • 

    

    4. 

  4. 

    事件监听器： 相比于在HTML中直接使用onclick属性，推荐使用JavaScript的addEventListener方法来绑定事件。这有助于将HTML结构与JavaScript行为分离，提高代码的可维护性和可读性。
    // 推荐使用 addEventListener
document.addEventListener('DOMContentLoaded', () => {
    const searchButton = document.querySelector('button');
    searchButton.addEventListener('click', searchJobs);
});
    5. 

  5. 错误处理： 对于更复杂的应用，应考虑处理输入为空或无效的情况，提供友好的错误提示。
    6. 



总结


通过本教程，我们学习了如何利用JavaScript的document.getElementById方法获取HTML输入框的用户数据，并将其应用于数据过滤逻辑。结合适当的大小写处理和事件绑定，我们成功构建了一个基础但功能完善的实时职位搜索功能。进一步的优化可以围绕用户体验、性能和代码结构展开，以构建更健壮、更友好的Web应用。






            
 oppo ai office 前端 mac html app javascript java go git nas  
 
          
        
      
      

        
           

            
          

                    

            
          

           

      

      

        

          

            
相关文章

          

                    

            
          

                    

            
          

                    

            
          

                    

            
          

                    

            
          

                    

            
          

           

      

    
    

  


 




  

  
  

    

      

        
           

            

              

                
              

              
            

                      

           

      

      
按ESC键退出。