Show Menu
TOPICS×

빠른 검색 구성 요소

빠른 검색 구성 요소는 방문자가 일치하는 컨텐츠를 쉽게 찾고 결과를 볼 수 있도록 웹 사이트에 검색 기능을 제공하고 검색 결과를 제공합니다.

사용량

빠른 검색 구성 요소는 사이트 방문자에게 컨텐츠를 검색하고, 결과를 적소에 보고, 일치하는 페이지로 쉽게 이동할 수 있는 기능을 제공합니다. 사용자가 검색 결과를 스크롤할 때 새로운 결과가 동적으로 가져옵니다.
컨텐츠 작성자는 편집 대화 상자를 사용하여 컨텐츠 트리에서 검색이 시작되는 위치를 정의할 수 있습니다. 템플릿 작성자는 디자인 대화 상자를 사용하여 컨텐츠 트리에서 검색이 시작되어야 하는 위치에 대한 기본값, 최대 결과 집합 크기 및 최소 검색 용어 길이를 설정할 수 있습니다.

버전 및 호환성

빠른 검색 구성 요소의 현재 버전은 v1이며, 이 버전은 2018년 1월 핵심 구성 요소 릴리스 2.0.0과 함께 도입되었으며 이 문서에 설명되어 있습니다.
다음 표에서는 구성 요소의 지원되는 모든 버전, 구성 요소 버전이 호환되는 AEM 버전 및 이전 버전에 대한 설명서 링크에 대해 자세히 설명합니다.
구성 요소 버전
AEM 6.3
AEM 6.4
AEM 6.5
클라우드 서비스로 AEM 사용
v1
호환 가능
호환 가능
호환 가능
호환 가능
핵심 구성 요소 버전 및 릴리스에 대한 자세한 내용은 핵심 구성 요소 버전을 참조하십시오 .

샘플 구성 요소 출력

다음은 We.Retail에서 가져온 샘플입니다 .

스크린샷

HTML

<section class="cmp-search" role="search" data-cmp-is="search" data-cmp-min-length="3" data-cmp-results-size="10"> <form class="cmp-search__form" data-cmp-hook-search="form" method="get" action="/content/we-retail/us/en/equipment.searchresults.json/_jcr_content/root/responsivegrid/search" autocomplete="off"> <div class="cmp-search__field"> <i class="cmp-search__icon" data-cmp-hook-search="icon"></i> <span class="cmp-search__loading-indicator" data-cmp-hook-search="loadingIndicator"></span> <input class="cmp-search__input" data-cmp-hook-search="input" type="text" name="fulltext" placeholder="Search" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-invalid="false"> <button class="cmp-search__clear" data-cmp-hook-search="clear"> <i class="cmp-search__clear-icon"></i> </button> </div> </form> <div class="cmp-search__results" data-cmp-hook-search="results" role="listbox" aria-multiselectable="false"></div> <script data-cmp-hook-search="itemTemplate" type="x-template"> <a class="cmp-search__item" data-cmp-hook-search="item"> <span class="cmp-search__item-title" data-cmp-hook-search="itemTitle"></span> </a> </script> </section>

JSON

"search":{ "columnClassNames":"aem-GridColumn aem-GridColumn--default--12", "relativePath":"/jcr:content/root/responsivegrid/search", "resultsSize":10, "searchTermMinimumLength":3, ":type":"core/wcm/components/search/v1/search" }

기술 정보

DOS 공격으로부터 검색 구성 요소 또는 AEM 기반 응용 프로그램을 보호하는 것은 보다 높은 수준에서(예: 디스패처에서 사용)
mod_security
해야 합니다.
빠른 검색 구성 요소에 대한 최신 기술 문서는 GitHub에서 찾을 수 있습니다 .
핵심 구성 요소 개발에 대한 자세한 내용은 핵심 구성 요소 개발자 설명서를 참조하십시오.

Edit Dialog

컨텐츠 작성자는 편집 대화 상자를 사용하여 컨텐츠 트리에서 검색이 시작되는 위치를 정의할 수 있습니다.
검색 루트
- 검색을 시작할 루트 페이지입니다. 검색 루트는 블루프린트 마스터, 언어 마스터 또는 일반 페이지일 수 있습니다.

디자인 대화 상자

템플릿 작성자는 디자인 대화 상자를 사용하여 컨텐츠 트리에서 검색이 시작되어야 하는 위치에 대한 기본값을 설정할 수 있고 최대 결과 세트 크기 및 최소 검색 조건 길이를 설정할 수 있습니다. 디자인 대화 상자를 사용하면 템플릿 작성자가 컨텐츠 작성자가 사용할 수 있는 텍스트 서식 지정 옵션을 정의할 수 있습니다.

속성 탭

  • 검색
    ​루트컨텐츠 작성자가 컨텐츠 페이지에 빠른 검색 구성 요소를 배치할 때의 검색 루트의 기본값
  • 결과
    ​크기검색 요청으로 가져오는 최대 결과 수입니다.
  • 검색어 최소
    ​길이검색을 시작할 검색어의 최소 길이
결과 크기
검색어 최소
길이는 디자인 모드에서만 설정할 수 있으므로 컨텐츠 작성자가 이러한 값을 수정할 수 없음을 의미합니다.
결과 크기
검색어 최소
길이는각각 너무 높거나 낮게 설정된 경우 성능에 영향을 줄 수 있습니다.

스타일 탭

빠른 검색 구성 요소는 AEM 스타일 시스템을 지원합니다 .