Search在线搜索版块功能示范脚本

admin

示范脚本一
DIV脚本：
<div class="so"><div class="box"><div class="left">$func_summary(para=Keyword,title=no,memo=1,content=no)$</div>
<div class="right">$func_search(table=1|2,btn=1)$</div></div></div>
CSS脚本：
.so{ display:inline-block; width:100%; border-top:1px solid #eee; padding-top:20px; margin-top:50px;}
.so .box .left .Subject .Descript{ height:50px; line-height:50px; text-indent:68px; font-size:20px; background:url(lamp.jpg) no-repeat;}
.so .box .right{ height:32px; line-height:32px; width:300px; background:url(so.jpg) no-repeat; margin-top:10px;}
.so #kw{ height:26px; line-height:26px; width:200px; margin-left:10px; margin-top:2px; border:0}
.so select{ border:0;}
.so .BtnSearch{ text-indent:-99px; width:26px; background:none; border:0}
JS脚本：
if(jQuery("#kw").val()==""){jQuery("#kw").val("请输入搜索关键词...")}
var cur=jQuery("#kw").val();
jQuery("#kw").click(function(){jQuery("#kw").val("");})
jQuery("#kw").focusout(function(){if(jQuery("#kw").val()==""){jQuery("#kw").val(cur)}else{cur=jQuery("#kw").val();}})
案例参考：hlby
截图效果：

特别提醒：不同网站应具风格进行脚本调整，以确保最简短最优化最合理的脚本，不要千篇一律复制粘贴。

以上脚本已经淘汰，最新推荐：
DIV：
<div class="search"><div class="container"><div class="row">$func_search(table=1|2,para=Search,memo=1,show=title|memo|content,btn=1)$</div></div></div>
CSS:
hondy.css
.search .Content{flex:1}
.search form{display:flex;flex-flow: row nowrap;border:1px solid var(--primary)}
.search input,.search select{height:30px;line-height:28px;padding:0 5px;font-size:14px;border-style:none}
.search input[name=kw]{flex:1;border-right:0 solid transparent}
.search input[type=submit]{padding-left:10px;padding-right:10px}
.search select{padding-right:0}
style.css
.search{padding:8px 0;background:#0f3855}
.search .row{flex:row nowrap;justify-content: space-between; align-items: center}
.search .row > div{padding-left:15px;padding-right:15px}
.search div{color: #617C8F}
.search .RowsTitle .Title::before{content:'\f1b0';margin-right:10px}
@media (max-width: 992px) {
    .search .Subject{display: none;}
}
@media (max-width: 576px) {
    .search .RowsTitle{display: none;}
}

admin

CSS脚本：
.search{ float:right; display:block; width:340px; position:absolute; bottom:15px; right:0;}
.search input{ width:168px; height:30px; line-height:30px; padding:0; margin:0; background-color:#DBECF8; border:0; padding:0 20px;}
.search input[type=submit]{ width:auto; height:30px; line-height:30px; color:#fff; background-color:#000; border:0;}
.SearchType{ display:none;}

示例模板：sida
复制粘贴后，修改相应的参数，即可。

搜索按纽换成图片的CSS脚本：
.search{ float:right; display:block; width:340px; position:absolute; bottom:0; right:0;}
.search input{ vertical-align:middle; width:168px; height:25px; line-height:25px; padding:0; margin:0; background-color:#DBECF8; border:0; padding:0 10px;}
.search input[type=submit]{ vertical-align:middle; width:38px; height:25px; line-height:30px; color:#fff; background:url(btnso.jpg); text-indent:-999px; overflow:hidden; border:0;}
.SearchType{ display:none;}

admin

保证IE与CHROMEmgk同样效果的，深色搜索背景select小三角的设计方法。
.search{ float:right; width:400px;}
.search input{ width:200px; height:23px; line-height:23px; padding:0; margin:0; border:1px solid #419B15; padding:0 8px; margin:0;}
.SearchType{ width:45px; height:25px; background:url(dropdown.png) no-repeat #419B15 33px 10px; border:none; color:#fff;-webkit-appearance:none; padding:0 5px;}
.SearchType option{ color:#fff;}
.SearchType::-ms-expand{ display:none;}
.search input[type=submit]{ width:auto; width:38px; height:25px; line-height:25px; color:#fff; border:0; text-indent:-999px; background:url(search.png) no-repeat #419B15 center 2px;}
参考：模板qh

admin

蔚明搜索示范，尺寸：1200，背景深色

DIV：
<div class="search wrap">$func_search(table=1|2,para=Search,memo=1,show=title|memo|content,btn=1)$</div>
CSS：
.search{ padding:20px 0;}
.search .Subject{ float:left; width:550px; text-align:left;}
.search .RowsTitle{ float:left; width:150px;}
.search .RowsTitle .Title{ background:url(soo.png) no-repeat left center; font-size:18px; text-align:left; padding-left:30px; line-height:25px;}
.search .Content{ float:left; width:500px; text-align:left;}
.search #kw{ border:0; line-height:25px; width:300px; color:#333; padding:0 10px;}
.search .SearchType{ border:0; height:25px; line-height:25px; color:#333;}
.search option{ color:#333;}
.BtnSearch{ background:#000; color:#fff; border:0; line-height:25px; padding:0 20px;}
.BtnSearch:hover{ background:#f00}
JS:
if(jQuery("#kw").val()==""){jQuery("#kw").val("请输入搜索关键词...")}
var cur=jQuery("#kw").val();
jQuery("#kw").click(function(){jQuery("#kw").val("");})
jQuery("#kw").focusout(function(){if(jQuery("#kw").val()==""){jQuery("#kw").val(cur)}else{cur=jQuery("#kw").val();}})

CSS改善版，针对精灵拼合图片的设计，红色部分修改为：
.search .RowsTitle .Title:before{ float:left; width:25px; height:25px; content:""; background:url(spirit.png) no-repeat 0 6px;}
.search .RowsTitle .Title{ font-size:18px; text-align:left; line-height:25px;}

admin

DIV：
<div class="search"><div class="wrap">$func_search(table=1|2,btn=1,para=Search,memo=1,show=title|content|memo)$</div></div>
CSS：
.search{ background: url(bgsearch.jpg) no-repeat center; padding:50px 0; height: 140px;}
.search .wrap{ width: 500px;}
.search .Title{text-align: center; font-size: 30px; color:#fff;}
.search .Descript{line-height: 40px; color: #fff; text-align: center;}
.search #kw{ border:0; line-height:50px; width:320px; color:#333; padding:0 10px; vertical-align: top;}
.search .SearchType{ border:0; width: 60px; height:50px; line-height:50px; color:#333; font-size: 16px; vertical-align: top;}
.search option{ color:#333; line-height: 48px; font-size: 16px; letter-spacing: 5px;}
.BtnSearch{ background:#46a6e0; color:#fff; border:0; line-height:50px; letter-spacing: 10px; width:100px; text-align: center;font-size: 16px; padding-left:10px; vertical-align: top;}
.BtnSearch:hover{ background:#f00}

admin

.search{ max-width:1000px; width:100%; margin: 0 auto; height: 50px; margin-top:-50px; position: relative; z-index: 10000; background:#eee;}
.search .RowsTitle{ width:100px; margin:0;}
.search .Subject{ width:calc(50% - 100px); margin: 0; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.search .Content{ width: 50%; height: 100%; background:#000;}
.search .Content *{ height: 100%;}
.search #kw{width:calc(100% - 160px); padding:0 10px; border:0; height: 100%; line-height: 100%; background: transparent; color: #fff;}
.search select,.search input[type=submit]{ width: 70px; height: 100%; line-height: 100%; border:0; background: transparent; color: #fff; font-size: 16px;}
.search option{ color:#000; font-size: 16px;}
<!--关键词输入框过短时，自动隐藏左白块--->
@media (max-width: 768px) {
    .search .RowsTitle,.search .Subject{ display: none;}
    .search .Content{ width: 100%;}
}

admin

必须在Hondy框架下，包括hondy.css,hondy.js
DIV：
<div class="search keyword"><div class="container py-3"><div class="row align-items-center">$func_search(para=search,memo=1,table=1|2,btn=1)$</div></div></div>
CSS：
.search{
    form{border-color:$fst;
    input[type=submit]{
        background-color:$fst;
        color: $white;
    }
    }
}

JS：
$(function(){
    if($(".keyword").length>0){
        rndsearch("keyword",6);
    }
})

admin

DIV：
<div class="container bg-search white">
    <div class="search keyword justify-content-between flex-nowrap align-items-center py-4 text-center" sr="bottom">
        $func_search(title=1,para=Search,table=1|2,btn=1,memo=1)$</div>
</div>

CSS：
.bg-search {
    position: relative;

    .search {
        display: flex;
        flex: 1;
        justify-content: space-between;
        background-color: rgba($sec, .9);
        padding-left: 1.5rem;
        padding-right: 1.5rem;

        .RowsTitle {
            width: 100px;
            white-space: nowrap;
        }

        [type=submit] {
            background-color: $fth;
        }

        .Subject {
            display: none;
        }
    }
}

@include media-breakpoint-up(md) {

    .bg-search {
        .search {
            display: flex;
            flex: 1;
            width: 100%;
            justify-content: space-between;
            margin-left: -1.5rem;
            margin-right: -1.5rem;
            position: absolute;
            top: -100px;
            z-index: 10;
            border-top-left-radius: 3rem;

            .Content {
                display: flex;
                flex: 1;

                .Margin {
                    display: flex;
                    flex: 1;

                    form {
                        display: flex;
                        flex: 1;
                    }
                }
            }
        }
    }
}

@include media-breakpoint-up(lg) {
    .bg-search {
        .search {
            .Subject {
                display: flex;
                flex: 1;
                width: auto;
                white-space: nowrap;
                margin-right:2rem!important;
                overflow: hidden;

                a {
                    display: inline-block;

                    &:hover {
                        color: $fth;
                    }
                }
            }
        }
    }
}