[그누보드] 게시판 검색창 커스텀

1. HTML 코드 

        <div class="search-box">
            <form name="fsearch" method="get" class="serach-form">
            <input type="hidden" name="bo_table" value="<?php echo $bo_table ?>">
            <input type="hidden" name="sca" value="<?php echo $sca ?>">
            <input type="hidden" name="sop" value="and">
            <label for="sfl" class="sound_only">검색대상</label>
                <select name="sfl" id="sfl">
                    <option value="wr_name" <?=get_selected($sfl, 'wr_name', true); ?>>성함</option>
                    <option value="wr_subject" <?=get_selected($sfl, 'wr_subject');?>>연락처</option>
                    <option value="wr_content" <?=get_selected($sfl, 'wr_content');?>>희망지역</option>
                </select>
                <div class="search-ipt-box">
                    <input type="text" name="stx" value="<?php echo stripslashes($stx) ?>" required id="stx" class="search-ipt" size="25" maxlength="20" placeholder=" 검색어를 입력해주세요">
                    <button type="submit" value="검색" class="search-btn"><img src="<?=G5_IMG_URL;?>/board_img/search_icon.png" /></button>
                </div>
            </form>
        </div>

검색 항목이 여러개라면 ? 

<option value="wr_content|wr_subject" <?=get_selected($sfl, 'wr_content|wr_subject');?>>희망지역</option>

이렇게 | 로 구분해 주면 된다  : ) 

 

2. CSS코드

/*-------------- search-box --------------*/
.search-box{ padding:20px 0; max-width:400px; } 
.search-box .serach-form{ display:flex; }
.search-box .serach-form select{ display:block; width:30%; padding:7px 10px; border: 1px solid #E6E6E6; border-radius:4px; }
.search-box .serach-form .search-ipt-box{ width:70%; position:relative; padding-left:5px;  }
.search-box .serach-form .search-ipt-box .search-ipt{ display:block; width:100%; padding:7px 30px 7px 10px; border: 1px solid #E6E6E6; border-radius:4px; }
.search-box .serach-form .search-ipt-box .search-btn{ position:absolute; top:0; right:2px; height:100%; background:none; border: none; display:flex; align-items: center; justify-content: center; padding:0 5px; }

@media screen and (max-width: 700px) {
    .search-box .serach-form{ font-size: 14px; }

    .search-box{ width:100%; max-width: 100%; padding:20px 10px; }
    .search-box .serach-form select{ width: 110px; }
    .search-box .serach-form .search-ipt-box{ width: calc( 100% - 110px ) ; }
}
/*-------------- search-box end-----------*/

 

3. jquery 

    jQuery(function($){
        // 게시판 검색
        $(".btn_bo_sch").on("click", function() {
            $(".bo_sch_wrap").toggle();
        })
        $('.bo_sch_bg, .bo_sch_cls').click(function(){
            $('.bo_sch_wrap').hide();
        });
    });