成年人的在线免费视频,婷婷91精品国产91久久综合,人妻精品人妻888,性感美女视频一区二区三区,国产熟女精品视频免费看,国内精品九九久久精品小草,中文字幕日韩精品欧美丝袜,午夜精品久久久久蜜桃毛片,91久久在线视频观看

分享一個同框架篩選不同類型模塊的搜索思路，僅供參考。我自己也是個小白，大神路過哈。

本來我的網(wǎng)站有不同模塊（比如：有文章模塊，有下載模塊），想用同一個搜索框進行篩選分別搜索對應(yīng)類型的內(nèi)容出來。在社區(qū)看了好多帖子都沒有找到合適的方法，自己搗鼓了一下弄出來這樣的，效果如下：

比如，我要搜站內(nèi)的下載資源，就在上圖選擇【下載】然后輸入關(guān)鍵詞進行搜索，需要搜文章內(nèi)容，就在上圖旋轉(zhuǎn)【文章】然后輸入關(guān)鍵詞進行搜索。同理，你也可以按照這個思路繼續(xù)新增其它類型模型來搭建多類型搜索。

后臺模塊定義如下圖：

如果你要再新增一種類型模塊進行搜索，就在這里新增一條：

例如：（舉例思路）

    <!-- 新增模塊篩選 -->
                <select name="s" class="module-filter">
                    <option value="news">文章</option>
                    <option value="download">下載</option>
                    <option value="download">產(chǎn)品</option>
                </select>

HTML代碼部分：

   
    <h4>站內(nèi)搜索</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="輸入關(guān)鍵詞" />
    
    <button type="submit" id="search-option" value="站內(nèi)搜索"><i class="fa fa-search"></i></button>
    </form>
    </div>

接上面的HTML代碼對應(yīng)的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;
}

/* 搜索關(guān)鍵詞輸入框 */
input.keyword {
 flex-grow: 1;
 /* 占據(jù)剩余空間 */
 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);
 /* 聚焦光環(huán) */
}

/* 搜索按鈕 */
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 {
 /* 圖標大小調(diào)整 */
 font-size: 18px;
}

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

以上大體框架和樣式以及思路都陳列出來了，希望可以幫到大家。如大神們感覺沒用，那就當給我自己做個記錄哈。見笑了！