多模块筛选搜索功能及思路（附示例代码）

分享一个同框架筛选不同类型模块的搜索思路，仅供参考。我自己也是个小白，大神路过哈。

本来我的网站有不同模块（比如：有文章模块，有下载模块），想用同一个搜索框进行筛选分别搜索对应类型的内容出来。在社区看了好多帖子都没有找到合适的方法，自己捣鼓了一下弄出来这样的，效果如下：

比如，我要搜站内的下载资源，就在上图选择【下载】然后输入关键词进行搜索，需要搜文章内容，就在上图旋转【文章】然后输入关键词进行搜索。同理，你也可以按照这个思路继续新增其它类型模型来搭建多类型搜索。

后台模块定义如下图：

如果你要再新增一种类型模块进行搜索，就在这里新增一条：

例如：（举例思路）

    <!-- 新增模块筛选 -->
                <select name="s" class="module-filter">
                    <option value="news">文章</option>
                    <option value="download">下载</option>
                    <option value="download">产品</option>
                </select>

HTML代码部分：

   
    <h4>站内搜索</h4>
    <div class="search" id="#search">
    <form name="search" method="get" action="{SITE_URL}index.php">
    
    <!-- 新增模块筛选 -->
                <select name="s" class="module-filter">
                    <option value="news">文章</option>
                    <option value="download">下载</option>
                </select>
       
       
    <input type="hidden" name="c" value="search">
    <input type="text" name="keyword" class="keyword" placeholder="输入关键词" />
    
    <button type="submit" id="search-option" value="站内搜索"><i class="fa fa-search"></i></button>
    </form>
    </div>

接上面的HTML代码对应的CSS代码：

/*  自定义搜索模块 */

.search {
 margin-top: 15px
}

/* 表单容器 */
form[name="search"] {
 display: flex;
 /* 使用 Flexbox 布局 */
 align-items: center;
 /* 垂直居中对齐 */
 gap: 5px;
 /* 元素之间的间距 */
 max-width: 600px;
 /* 限制表单最大宽度 */
 margin: 0 auto;
 /* 水平居中 */
 padding: 2px;
 background-color: #fff;
 border-radius: 8px;
 /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
}

/* 模块筛选下拉框 */
select.module-filter {
 padding: 8px 12px;
 border: 1px solid #ddd;
 border-radius: 4px;
 font-size: 14px;
 background-color: #fff;
 cursor: pointer;
}

/* 搜索关键词输入框 */
input.keyword {
 flex-grow: 1;
 /* 占据剩余空间 */
 padding: 7px 15px;
 border: 1px solid #ddd;
 border-radius: 4px;
 font-size: 14px;
}

input.keyword:focus {
 outline: none;
 border-color: #007bff;
 /* 聚焦时边框颜色 */
 box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
 /* 聚焦光环 */
}

/* 搜索按钮 */
button#search-option {
 padding: 8px 15px;
 background-color: #007bff;
 color: white;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 font-size: 16px;
 display: flex;
 align-items: center;
 justify-content: center;
}

button#search-option:hover {
 background-color: #0056b3;
 /* 悬停时背景色 */
}

button#search-option i {
 /* 图标大小调整 */
 font-size: 18px;
}

/* 隐藏的输入框保持隐藏 */
input[type="hidden"] {
 display: none;
}

以上大体框架和样式以及思路都陈列出来了，希望可以帮到大家。如大神们感觉没用，那就当给我自己做个记录哈。见笑了！