本文旨在提供一份专业的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逻辑将处理用户输入、构建查询字符串并打开新的浏览器标签页。
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
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
