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

在 Web 开发中，搜索栏是一个非常常见和实用的功能。我们经常需要在搜索栏中输入关键词，然后将搜索结果展示出来。在这篇文章中，我们将讨论如何使用 Javascript 条件流来实现一个 Web 搜索栏。

条件流概述

条件流是一种流程控制机制，它使用不同的条件去执行不同的操作。在 Javascript 中，条件流主要有两种形式：if 语句和 switch 语句。

if 语句

if 语句是一种最基本的条件流形式，它根据给定的条件来执行相应的操作。

if (条件表达式) {
  // 条件成立时执行的操作
} else {
  // 条件不成立时执行的操作
}

switch 语句

switch 语句是一种更为高级的条件流形式，它可以根据不同的条件执行不同的操作。

switch (条件表达式) {
  case 值1:
    // 条件表达式等于值1时执行的操作
    break;
  case 值2:
    // 条件表达式等于值2时执行的操作
    break;
  default:
    // 条件表达式不等于任何值时执行的操作
    break;
}

实现搜索栏

现在我们来看一下如何使用条件流来实现一个 Web 搜索栏。我们将使用一个包含几个简单的文本框和一个“搜索”按钮的 HTML 表单作为例子。

<form>
  <input type="text" id="search-input-1" placeholder="关键词 1">
  <input type="text" id="search-input-2" placeholder="关键词 2">
  <input type="text" id="search-input-3" placeholder="关键词 3">
  <button id="search-btn">搜索</button>
</form>

我们的搜索栏将有以下要求：

• 如果只填写了一个关键词，那么只搜索与该关键词相关的结果。
• 如果填写了两个关键词，那么只搜索与这两个关键词都相关的结果。
• 如果填写了三个关键词，那么只搜索与这三个关键词都相关的结果。

我们将按照上面的要求使用条件流来实现搜索栏。首先我们需要获取 HTML 元素并为“搜索”按钮绑定点击事件监听器。

const searchInput1 = document.getElementById('search-input-1');
const searchInput2 = document.getElementById('search-input-2');
const searchInput3 = document.getElementById('search-input-3');
const searchBtn = document.getElementById('search-btn');

searchBtn.addEventListener('click', () => {
  // 这里将使用条件流来处理搜索逻辑
});

接下来，我们将使用 if 语句来检查用户输入了多少个关键词，并根据不同的条件执行不同的操作。

searchBtn.addEventListener('click', () => {
  if (searchInput3.value !== '') {
    // 搜索三个关键词
  } else if (searchInput2.value !== '') {
    // 搜索两个关键词
  } else {
    // 搜索一个关键词
  }
});

现在我们需要在每个分支中编写实际的搜索逻辑。这里我们只简单地输出用户输入的关键词，以验证搜索栏的正确性。

searchBtn.addEventListener('click', () => {
  if (searchInput3.value !== '') {
    console.log(`搜索 ${searchInput1.value}、${searchInput2.value} 和 ${searchInput3.value}`);
  } else if (searchInput2.value !== '') {
    console.log(`搜索 ${searchInput1.value} 和 ${searchInput2.value}`);
  } else {
    console.log(`搜索 ${searchInput1.value}`);
  }
});

最后，我们将完整的代码放在一起。

const searchInput1 = document.getElementById('search-input-1');
const searchInput2 = document.getElementById('search-input-2');
const searchInput3 = document.getElementById('search-input-3');
const searchBtn = document.getElementById('search-btn');

searchBtn.addEventListener('click', () => {
  if (searchInput3.value !== '') {
    console.log(`搜索 ${searchInput1.value}、${searchInput2.value} 和 ${searchInput3.value}`);
  } else if (searchInput2.value !== '') {
    console.log(`搜索 ${searchInput1.value} 和 ${searchInput2.value}`);
  } else {
    console.log(`搜索 ${searchInput1.value}`);
  }
});

现在我们就成功地使用条件流来实现了一个 Web 搜索栏。你可以将其中的搜索逻辑替换为实际的搜索代码，以实现一个真正的搜索栏。