Aurora Modules

검색 폼

1:1문의 목록, 배송지 관리 페이지 등 검색 기능이 필요한 페이지에서 노출되는 검색 폼 모듈입니다.

주소 찾기 등 키워드 검색이 필요한 페이지에 활용할 수 있는 모듈입니다.

모듈명: search-field원본소스

검색 폼 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
isSearched	boolean	false	검색 여부
type	string	-	검색 유형
keyword	string	-	검색 인풋에 입력한 키워드 값

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<search-field shopby-module-key="inquiry-list-search-field">
    <span class="search-field">
        <span class="select select--md search-field__select-box">
            <select shopby-on:change="CHANGE_SEARCH_TYPE">
                <option value="TITLE">제목</option>
                <option value="CONTENT">내용</option>
            </select>
        </span>
        <span class="search-field__input">
            <span class="input-field input-field--md">
                <input
                    type="text"
                    value="{{keyword}}"
                    placeholder="검색어를 입력해주세요."
                    shopby-on:change="CHANGE_SEARCH_FIELD_KEYWORD"
                    shopby-on:keydown="KEYPRESS_SEARCH_FIELD_KEYWORD"
                />
            </span>
            <button type="button" class="search-field__search-btn" shopby-on:click="SEARCH">
                <span class="ico ico--magnet-black-24"></span>
            </button>
        </span>
    </span>
</search-field>

<search-field shopby-module-key="inquiry-list-search-field">
    <span class="search-field">
        <span class="search-field__input">
            <span class="input-field input-field--sm search-field__text-input">
                <input
                    type="text"
                    value="{{keyword}}"
                    placeholder="검색어를 입력해주세요."
                    shopby-on:change="CHANGE_SEARCH_FIELD_KEYWORD"
                    shopby-on:keydown="KEYPRESS_SEARCH_FIELD_KEYWORD"
                />
            </span>
            <button type="button" class="search-field__search-btn" shopby-on:click="SEARCH">
                <span class="ico ico--magnet-black-24"></span>
            </button>
        </span>
    </span>
</search-field>

/* 여기에 스타일 코드를 작성해주세요. */