业务经理
微信扫描以上二维码
028-61286886
分享经验
版主：论坛审计组
多模块筛选搜索功能及思路（附示例代码）
分享一个同框架筛选不同类型模块的搜索思路，仅供参考。我自己也是个小白，大神路过哈。
本来我的网站有不同模块（比如：有文章模块，有下载模块），想用同一个搜索框进行筛选分别搜索对应类型的内容出来。在社区看了好多帖子都没有找到合适的方法，自己捣鼓了一下弄出来这样的，效果如下：
比如，我要搜站内的下载资源，就在上图选择【下载】然后输入关键词进行搜索，需要搜文章内容，就在上图旋转【文章】然后输入关键词进行搜索。同理，你也可以按照这个思路继续新增其它类型模型来搭建多类型搜索。
后台模块定义如下图：
如果你要再新增一种类型模块进行搜索，就在这里新增一条：
例如：（举例思路）
文章
下载
产品
HTML代码部分：
站内搜索
文章
下载
接上面的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;
}以上大体框架和样式以及思路都陈列出来了，希望可以帮到大家。如大神们感觉没用，那就当给我自己做个记录哈。见笑了！