J*aScript与HTML交互：构建实时职位搜索功能_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript与HTML交互：构建实时职位搜索功能

2025-11-11

浏览次数：次

返回列表

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

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

构建基础HTML搜索界面

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

<form>
  <input type="text" id="titleInput" placeholder="请输入职位名称">
  <input type="text" id="locationInput" placeholder="请输入地点">
  <button type="button" onclick="searchJobs()">搜索</button>
</form>

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

定义职位数据与搜索逻辑

在前端应用中，数据通常以数组或对象的形式存在。这里我们使用一个包含多个职位对象的数组作为示例数据源。每个职位对象都包含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: &quot;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 Bon*enture",
  },
];

/**
 * 根据标题和地点筛选职位列表。
 * @param {Array<Object>} 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与J*aScript的交互

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

获取输入值： 使用document.getElementById('id').value可以获取指定id的输入框的当前值。
大小写转换： 为了与findJobs函数中的逻辑保持一致，获取到的用户输入也应转换为小写，即.toLowerCase()。
事件绑定： 在HTML按钮的onclick事件中，直接调用一个包装函数或findJobs函数，并将获取到的输入值作为参数传入。

考虑到代码的组织性和可维护性，我们通常会创建一个独立的函数来处理按钮点击事件，该函数负责获取输入值并调用核心搜索逻辑。

// 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()即可：

<form>
  <input type="text" id="titleInput" placeholder="请输入职位名称">
  <input type="text" id="locationInput" placeholder="请输入地点">
  <button type="button" onclick="searchJobs()">搜索</button>
</form>

完整示例代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职位搜索器</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        input[type="text"] { padding: 8px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px; }
        button { padding: 8px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background-color: #0056b3; }
        #results { margin-top: 20px; border: 1px solid #eee; padding: 10px; min-height: 50px; }
        .job-item { margin-bottom: 5px; padding: 5px; background-color: #f9f9f9; border-radius: 3px; }
        .job-item strong { color: #333; }
        .job-item span { color: #666; font-size: 0.9em; }
    </style>
</head>
<body>

    <h1>职位搜索</h1>

    <form>
        <input type="text" id="titleInput" placeholder="请输入职位名称">
        <input type="text" id="locationInput" placeholder="请输入地点">
        <button type="button" onclick="searchJobs()">搜索</button>
    </form>

    <div id="results">
        <!-- 搜索结果将显示在这里 -->
        <p>在此处查看搜索结果。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/9940">
                            <img src="https://img.php.cn/upload/webcode/000/000/007/176036040946409.png" alt="hstshop鸿思特商城系统">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/9940">hstshop鸿思特商城系统</a>
                            <p>鸿思特商城系统HstShop是一款B2C独立网店系统，由拥有十年互联网开发经验的牛头带队开发完成，完全免费开源，适合大中型网站平台快速构建立强大的网上商城平台网店系统。HstShop悉心听取每一位商家的需求与建议，根据中国人的购物习惯改进了购物流程，实现更好的用户购物体验。HstShop网店系统无论在产品功能、稳定性、执行效率、负载能力、安全性和搜索引擎优化等方面都居国内同类产品领先地位，成为国内</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="hstshop鸿思特商城系统">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/9940" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="hstshop鸿思特商城系统">
                        </a>
                    </div>
                
    </div>

    <script>
        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 Bon*enture",
          },
        ];

        /**
         * 根据标题和地点筛选职位列表。
         * @param {Array<Object>} jobsData 职位数据数组。
         * @param {string} searchTitle 搜索的职位标题关键词。
         * @param {string} searchLocation 搜索的地点关键词。
         * @returns {Array<Object>} 匹配的职位数组。
         */
        function findJobs(jobsData, searchTitle, searchLocation) {
            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);
                }
            });
            return matchedJobs;
        }

        // searchJobs 函数负责获取用户输入并调用 findJobs
        function searchJobs() {
            const title = document.getElementById('titleInput').value.toLowerCase();
            const location = document.getElementById('locationInput').value.toLowerCase();
            const resultsDiv = document.getElementById('results');

            const filteredJobs = findJobs(jobs, title, location);

            // 清空之前的搜索结果
            resultsDiv.innerHTML = '';

            if (filteredJobs.length > 0) {
                filteredJobs.forEach(job => {
                    const jobItem = document.createElement('p');
                    jobItem.className = 'job-item';
                    jobItem.innerHTML = `<strong>${job.title}</strong> <span>(${job.location})</span>`;
                    resultsDiv.appendChild(jobItem);
                });
                const countInfo = document.createElement('p');
                countInfo.innerHTML = `<strong>共找到 ${filteredJobs.length} 个职位。</strong>`;
                resultsDiv.appendChild(countInfo);
            } else {
                resultsDiv.innerHTML = '<p>没有找到匹配的职位。</p>';
            }
        }
    </script>
</body>
</html>

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

注意事项与优化

大小写处理： 始终在搜索前将用户输入和数据源中的文本统一转换为小写（或大写），以确保搜索结果的全面性。
用户体验：
- 结果显示： 将搜索结果直接呈现在HTML页面上，而不是仅仅在控制台输出，可以显著提升用户体验。
- 反馈机制： 当没有找到结果时，向用户提供明确的反馈。
- 输入清空： 考虑是否需要在搜索后清空输入框，或在用户再次输入时自动清空旧结果。
性能考量：
- 对于非常大的数据集，简单的forEach循环可能效率不高。可以考虑使用更高效的数据结构（如Trie树）或更优化的搜索算法。
- 如果搜索操作频繁且数据量大，可以考虑引入防抖（Debounce）或节流（Throttle）技术，限制搜索函数的执行频率。
事件监听器： 相比于在HTML中直接使用onclick属性，推荐使用J*aScript的addEventListener方法来绑定事件。这有助于将HTML结构与J*aScript行为分离，提高代码的可维护性和可读性。
```
// 推荐使用 addEventListener
document.addEventListener('DOMContentLoaded', () => {
    const searchButton = document.querySelector('button');
    searchButton.addEventListener('click', searchJobs);
});
```
错误处理： 对于更复杂的应用，应考虑处理输入为空或无效的情况，提供友好的错误提示。

总结

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

以上就是J*aScript与HTML交互：构建实时职位搜索功能的详细内容，更多请关注其它相关文章！

# 互联网关键词排名计划 # 转换为 # 搜索功能 # 如何实现 # 清空 # 数据结构 # 网店 # 泰兴网站推广联系热线 # seo里keywords长度 # 输入框 # 东城长安网站建设项目 # 民宿营销推广促销方面 # 营销推广兼职加盟费多少 # 长沙开福网站优化 # 濮阳网站建设招商电话 # 智能搜索头像关键词排名 # 如何注册seo # javascript # 搜索结果 # 请输入 # 关键词 # 点击 # nas # ai # mac # office # oppo # app # go # git # 前端 # html # java