将HTML输入与JavaScript搜索逻辑整合：一个实用的教程-js教程-PHP中文网

将HTML输入与JavaScript搜索逻辑整合：一个实用的教程

本教程详细介绍了如何将html表单中的用户输入与javascript搜索函数相结合，以实现动态数据过滤。我们将学习如何使用`document.getelementbyid`获取输入框的值，并通过事件处理将这些值传递给一个javascript函数，从而对预定义的数据集进行实时、大小写不敏感的搜索。

1. 理解数据结构与搜索需求

在构建搜索功能之前，首先需要明确我们要搜索的数据结构以及搜索目标。在本例中，我们有一个包含多个工作职位信息的数组，每个职位对象都包含title（标题）和location（地点）两个属性。我们的目标是根据用户输入的标题和地点来筛选出匹配的工作。

const jobs = [{
    title: "Marketing Intern",
    location: "US, NY, New York"
  },
  {
    title: "Customer Service - Cloud Video Production",
    location: "NZ, Auckland",
  },
  // ... 更多职位数据
  {
    title: "Visual Designer",
    location: "US, NY, New York"
  },
];

登录后复制

2. 实现核心搜索逻辑

为了处理搜索请求，我们需要一个JavaScript函数来接收搜索条件，并遍历jobs数组进行匹配。以下是findJobs函数的实现：

function findJobs(jobsArray, titleQuery, locationQuery) {
  let foundCount = 0; // 记录找到的工作数量

  // 确保搜索查询条件有效，并转换为小写以便进行大小写不敏感匹配
  const lowerTitleQuery = titleQuery ? titleQuery.toLowerCase() : '';
  const lowerLocationQuery = locationQuery ? locationQuery.toLowerCase() : '';

  jobsArray.forEach(job => {
    const lowercaseJobTitle = job.title.toLowerCase();
    const lowercaseJobLocation = job.location.toLowerCase();

    // 检查职位标题和地点是否包含搜索查询
    // 如果查询为空字符串，则认为匹配所有（即不作为过滤条件）
    const titleMatches = lowerTitleQuery === '' || lowercaseJobTitle.includes(lowerTitleQuery);
    const locationMatches = lowerLocationQuery === '' || lowercaseJobLocation.includes(lowerLocationQuery);

    if (titleMatches && locationMatches) {
      console.log(`找到职位: ${job.title}, 地点: ${job.location}`);
      foundCount++;
    }
  });

  console.log(`搜索完成，共找到 ${foundCount} 个匹配职位。`);
}

登录后复制

关键点说明：

参数传递： findJobs函数接收三个参数：jobsArray（要搜索的数据集）、titleQuery（标题搜索词）和locationQuery（地点搜索词）。
大小写不敏感： 为了提供更好的用户体验，搜索逻辑将所有字符串转换为小写进行比较（toLowerCase()），这样用户输入"customer"或"Customer"都能找到匹配项。
includes()方法： 用于检查一个字符串是否包含另一个字符串。
空查询处理： 增加了对空查询字符串的判断，如果用户未输入特定条件，则该条件不参与过滤。

3. 构建HTML用户界面

用户需要通过输入框来提供搜索条件，并点击按钮触发搜索。以下是对应的HTML结构：

立即学习“Java免费学习笔记（深入）”；

<form>
  <input type="text" id="titleInput" placeholder="请输入职位标题">
  <input type="text" id="locationInput" placeholder="请输入职位地点">
  <button type="button" id="searchButton">搜索</button>
</form>
<div id="results">
  <!-- 搜索结果将显示在这里 -->
</div>

登录后复制

关键点说明：

id属性： 为每个输入框和按钮分配唯一的id（例如titleInput, locationInput, searchButton），这是JavaScript访问这些元素的关键。
placeholder属性： 为用户提供输入提示。
type="button"： 确保按钮不会提交表单，而是通过JavaScript处理点击事件。

4. 连接HTML输入与JavaScript逻辑

现在，我们需要将用户在HTML输入框中输入的值获取到JavaScript中，并在点击按钮时调用findJobs函数。

最直接的方法是在按钮的onclick属性中直接调用JavaScript函数，并传入输入框的值。

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

<form>
  <input type="text" id="titleInput" placeholder="请输入职位标题">
  <input type="text" id="locationInput" placeholder="请输入职位地点">
  <button
    type="button"
    onclick="findJobs(
      jobs,
      document.getElementById('titleInput').value,
      document.getElementById('locationInput').value
    )"
  >
    搜索
  </button>
</form>

登录后复制

代码解析：

document.getElementById('id').value： 这是获取HTML输入框当前值的核心方法。
- document.getElementById('titleInput')：通过id获取到标题输入框的DOM元素。
- .value：获取该输入框当前输入的内容。
onclick事件： 当用户点击“搜索”按钮时，onclick属性中定义的JavaScript代码将被执行。
参数传递： 我们将jobs数组以及通过document.getElementById().value获取到的两个输入值作为参数传递给findJobs函数。

5. 完整示例与最佳实践

为了提供更清晰的结构和更好的可维护性，通常建议将事件监听器通过JavaScript代码绑定，而不是直接写在HTML的onclick属性中。

HTML (保持不变):

<form>
  <input type="text" id="titleInput" placeholder="请输入职位标题">
  <input type="text" id="locationInput" placeholder="请输入职位地点">
  <button type="button" id="searchButton">搜索</button>
</form>
<div id="results">
  <!-- 搜索结果将显示在这里 -->
</div>

登录后复制

JavaScript (结合数据、逻辑和事件绑定):

// 1. 数据定义
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",
  },
];

// 2. 搜索逻辑函数
function findJobs(jobsArray, titleQuery, locationQuery) {
  let foundJobs = []; // 存储找到的职位

  const lowerTitleQuery = titleQuery ? titleQuery.toLowerCase() : '';
  const lowerLocationQuery = locationQuery ? locationQuery.toLowerCase() : '';

  jobsArray.forEach(job => {
    const lowercaseJobTitle = job.title.toLowerCase();
    const lowercaseJobLocation = job.location.toLowerCase();

    const titleMatches = lowerTitleQuery === '' || lowercaseJobTitle.includes(lowerTitleQuery);
    const locationMatches = lowerLocationQuery === '' || lowercaseJobLocation.includes(lowerLocationQuery);

    if (titleMatches && locationMatches) {
      foundJobs.push(job); // 将匹配的职位添加到结果数组
    }
  });

  displayResults(foundJobs); // 调用函数显示结果
  console.log(`搜索完成，共找到 ${foundJobs.length} 个匹配职位。`);
}

// 3. 结果显示函数 (将结果渲染到HTML)
function displayResults(results) {
  const resultsDiv = document.getElementById('results');
  resultsDiv.innerHTML = ''; // 清空之前的搜索结果

  if (results.length === 0) {
    resultsDiv.innerHTML = '<p>未找到匹配的职位。</p>';
    return;
  }

  const ul = document.createElement('ul');
  results.forEach(job => {
    const li = document.createElement('li');
    li.textContent = `${job.title} - ${job.location}`;
    ul.appendChild(li);
  });
  resultsDiv.appendChild(ul);
}


// 4. 事件监听器绑定
document.addEventListener('DOMContentLoaded', () => {
  const searchButton = document.getElementById('searchButton');
  const titleInput = document.getElementById('titleInput');
  const locationInput = document.getElementById('locationInput');

  searchButton.addEventListener('click', () => {
    const title = titleInput.value;
    const location = locationInput.value;
    findJobs(jobs, title, location);
  });

  // 初始加载时显示所有职位
  displayResults(jobs);
});

登录后复制

最佳实践总结：

分离关注点： 将数据、搜索逻辑、HTML结构和事件处理分别管理，使代码更清晰、易于维护。
使用addEventListener： 推荐使用element.addEventListener('event', handler)来绑定事件，而不是onclick属性。这允许为一个元素绑定多个事件处理器，并且更好地将JavaScript行为与HTML结构分离。
DOMContentLoaded： 确保在DOM完全加载后再尝试获取HTML元素和绑定事件，以避免出现null引用错误。
结果渲染： 将搜索结果动态地渲染到HTML页面上，而不是只在控制台打印，提供更好的用户界面。
用户反馈： 提供“未找到匹配职位”等反馈信息，提升用户体验。