JavaScript动态搜索查询与多标签页管理实战-js教程-PHP中文网

JavaScript动态搜索查询与多标签页管理实战

DDD

发布： 2025-07-28 20:04:01

原创

999人浏览过

JavaScript动态搜索查询与多标签页管理实战

本文旨在提供一份专业的JavaScript教程，详细阐述如何在前端实现动态搜索查询功能，并结合用户输入自动打开多个目标链接。内容涵盖从HTML表单数据获取、URL参数编码、多标签页管理到弹窗拦截处理等核心技术点，旨在帮助开发者构建高效、用户友好的搜索与导航体验。

1. 引言：构建高效前端搜索功能

在现代web应用中，提供直观且功能强大的搜索能力至关重要。这不仅包括根据用户输入筛选数据，还可能涉及将用户引导至外部资源，例如根据搜索词自动打开包含查询结果的新标签页。本教程将深入探讨如何利用javascript实现这一需求，特别是如何从表单获取数据、动态构建包含搜索参数的url，并有效管理多标签页的开启，同时应对浏览器弹窗拦截的挑战。

2. HTML结构：用户输入与交互元素

为了实现搜索功能，我们需要在HTML中定义相应的输入字段、选择器和触发按钮。以下是一个典型的结构示例，其中包含公司/个人搜索切换、文本输入框以及用于触发搜索的按钮：

<body>
  <div class="container">
    <p class="title">MESA Canada</p>
  </div>
  <!-- 公司搜索字段 -->
  <div id="company-search-field">
    <input id="company-name" name="company-name" placeholder="在此输入公司名称" />
  </div>
  <!-- 个人搜索字段 (初始隐藏) -->
  <div id="person-search-field" style="display: none;">
    <input id="first-name" name="first-name" placeholder="在此输入人名" />
    <input id="last-name" name="last-name" placeholder="在此输入姓氏" />
  </div>
  <br>
  <!-- 搜索主体类型选择 -->
  <div class="search-subject">
    <input type="radio" onclick="displayPersonOrCompanySearchFields()" id="company-subject" name="subject-type" value="company-subject" checked>
    <label for="company-subject">公司</label>
    <input type="radio" onclick="displayPersonOrCompanySearchFields()" id="person-subject" name="subject-type" value="person-subject">
    <label for="person-subject">个人</label>
  </div>
  <br><br>

  <!-- 公司搜索状态选择与按钮 -->
  <div id="company-search-states">
    <div class="states-dropdown-list">
      <form action="" onsubmit="return false;">
        <b><span>公司记录</span> 和 <span>诉讼</span> 搜索</b>
        <ul class="states-dropdown">
          <!-- 省份/地区复选框列表 -->
          <li><label><input type="checkbox" name="state-name" class="state" value="federal-level">联邦级别</label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="yukon">育空</label></li>
          <!-- ... 其他省份/地区 ... -->
        </ul>
        <button onclick="openTabsWithSearch();">搜索公司记录</button>
        <button onclick="openTabsWithSearch();">搜索诉讼案件</button>
      </form>
    </div>
  </div>

  <!-- 个人搜索状态选择与按钮 (初始隐藏) -->
  <div id="person-search-states" style="display: none;">
    <div class="states-dropdown-list">
      <form action="" onsubmit="return false;">
        <b><span>公司关联</span> 和 <span>诉讼</span> 搜索</b>
        <ul class="states-dropdown" id="provinces-list">
          <!-- 省份/地区复选框列表 (与公司部分类似) -->
          <li><label><input type="checkbox" name="state-name" class="state" value="federal-level">联邦级别</label></li>
          <li><label><input type="checkbox" name="state-name" class="state" value="yukon">育空</label></li>
          <!-- ... 其他省份/地区 ... -->
        </ul>
        <button onclick="openTabsWithSearch();">搜索公司记录</button>
        <button onclick="openTabsWithSearch();">搜索诉讼案件</button>
      </form>
    </div>
  </div>
</body>

登录后复制

关键点：

id="company-search-field" 和 id="person-search-field" 用于根据选择的搜索类型（公司或个人）动态显示/隐藏输入框。
name="subject-type" 的单选按钮控制搜索类型。
name="state-name" 的复选框允许用户选择多个要搜索的省份/地区。
按钮的 onclick 事件将触发JavaScript函数。

3. JavaScript核心逻辑：动态构建URL与多标签页操作

核心JavaScript逻辑将处理用户输入、构建查询字符串并打开新的浏览器标签页。

纳米搜索

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

查看详情

3.1 辅助数据：目标URL映射

首先，我们需要一个JavaScript对象来存储各个省份/地区对应的基础URL。

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

const corporaterecordsUrls = {
    "federal-level": ["https://www.ic.gc.ca/app/scr/cc/CorporationsCanada/fdrlCrpSrch.html?locale=en_CA"],
    "alberta": ["https://beta.canadasbusinessregistries.ca/search"],
    "british-columbia": ["https://beta.canadasbusinessregistries.ca/search", "https://www.bccourts.ca/search_judgments.aspx", "https://www.provincialcourt.bc.ca/judgments.php?link

登录后复制

以上就是JavaScript动态搜索查询与多标签页管理实战的详细内容，更多请关注php中文网其它相关文章！