本文详细介绍了如何将html输入框与javascript数据过滤功能相结合，实现一个实时的职位搜索应用。通过利用`document.getelementbyid`获取用户在输入框中键入的值，并将其作为参数传递给javascript函数，我们能够对预定义的工作列表进行动态、大小写不敏感的筛选，最终在控制台输出匹配结果及数量。
要实现用户交互式的搜索功能，首先需要一个包含输入字段和触发按钮的HTML界面。用户将在此输入他们感兴趣的职位名称和地点。
<form> <input type="text" id="titleInput" placeholder="请输入职位名称"> <input type="text" id="locationInput" placeholder="请输入地点"> <button type="button" onclick="searchJobs()">搜索</button> </form>
在这个结构中，我们定义了两个文本输入框，分别用于职位标题和地点，并为它们分配了唯一的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<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()方法检查它们是否包含搜索关键词。这种方法确保了搜索是大小写不敏感的，提高了用户体验。匹配的职位会被收集起来，并在控制台输出。
立即学习“Java免费学习笔记（深入）”；
关键在于如何将HTML输入框中的值传递给findJobs函数。document.getElementById()是JavaScript中用于获取DOM元素的重要方法。
考虑到代码的组织性和可维护性，我们通常会创建一个独立的函数来处理按钮点击事件，该函数负责获取输入值并调用核心搜索逻辑。
// 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和JavaScript代码整合到一起，形成一个完整可运行的示例：
<!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>
<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 Bonaventure",
},
];
/**
* 根据标题和地点筛选职位列表。
* @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中直接使用onclick属性，推荐使用JavaScript的addEventListener方法来绑定事件。这有助于将HTML结构与JavaScript行为分离，提高代码的可维护性和可读性。
// 推荐使用 addEventListener
document.addEventListener('DOMContentLoaded', () => {
const searchButton = document.querySelector('button');
searchButton.addEventListener('click', searchJobs);
});错误处理： 对于更复杂的应用，应考虑处理输入为空或无效的情况，提供友好的错误提示。
通过本教程，我们学习了如何利用JavaScript的document.getElementById方法获取HTML输入框的用户数据，并将其应用于数据过滤逻辑。结合适当的大小写处理和事件绑定，我们成功构建了一个基础但功能完善的实时职位搜索功能。进一步的优化可以围绕用户体验、性能和代码结构展开，以构建更健壮、更友好的Web应用。
以上就是JavaScript与HTML交互：构建实时职位搜索功能的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
476
