You need to enable JavaScript to run this app. 是否可将搜索框输入的关键词作为子页面名称实现搜索跳转?
优惠活动
大模型
产品
解决方案
定价
更多

是否可将搜索框输入的关键词作为子页面名称实现搜索跳转?

自定义搜索框跳转至关键词同名子页面实现方案

可以实现该需求:当用户在搜索框输入关键词(例如输入“abc”)发起搜索时,站点可直接跳转至对应规则的子页面,即路径为https://examplewebsite.com/[输入关键词]的同名页面。

你最初搭建的基础搜索框代码如下:

<input name="name" type="search">
<button type="submit">search</button>

感谢用户Justinas提供的可落地实现步骤:

  • 替换原有搜索框代码
    将上述两行初始搜索框代码,替换为如下配置:
    <input type="text" id="name">
    <input type="submit" value="Search" onclick="Search(name)" />
    
  • 编写跳转逻辑脚本
    新建自定义JS文件(文件名可自行设置,例如search.js),在文件中添加搜索跳转函数:
    function Search(name) {
        // 获取搜索框内用户实际输入的内容
        var name = document.getElementById("name").value;
        // 执行跳转,匹配同域名下的同名路径
        window.location.href = name
    }
    
  • 网页引入脚本文件
    在网页的<head>标签区域添加脚本引入语句,确保页面能正常加载跳转逻辑,引入代码如下:
    <script type="text/javascript" src="search.js"></script>
    

内容的提问来源于stack exchange,提问作者18o4

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.22 14:45:05