자동 완성 정보

자동 완성 기능을 사용하는 검색 양식의 생성을 제어하기 위해 다양한 자동 완성 영역을 구성할 수 있으며 자동 완성 기능을 사용하는 검색 양식의 일부로 포함되어 있는 autocomplete_data.js 파일과 같은 파일을 구성할 수 있습니다.

자동 완성 정보

자동 완료 설정 페이지가 저장될 때마다 autocomplete_data.js 파일이 다시 생성되어 검색 컨텐트 네트워크에 게시됩니다.

자동 완료 구성

자동 완성 사용 검색 양식 및 파일의 생성을 제어하는 옵션을 구성하고 설정할 수 있습니다.

자동 완성 구성 후 검토를 위해 결과 HTML 소스를 볼 수 있습니다. HTML 소스는 웹 사이트의 페이지에 복사하여 붙여넣는 것입니다.

자세한 내용은 검색 양식이.

자동 완성 단어 목록 구성을 참조하십시오.

자동 완성 CSS 구성을 참조하십시오.

자동 완성 구성

  1. 제품 메뉴에서 Design > Auto-Complete > Auto-Complete Setup​를 클릭합니다.

  2. Auto-Complete Setup 페이지에서 원하는 옵션을 설정합니다.

    자세한 내용은 검색 양식이.

    옵션

    설명

    최대 제안

    자동 완성 제안 목록에 표시할 최대 항목 수를 지정합니다.

    최소 입력 문자

    제안 사항을 표시하기 전에 고객이 자동 완성 검색 양식에 입력해야 하는 문자 수를 지정합니다.

    최대 캐시 항목 수

    고객 브라우저에서 캐시에 대해 이전에 요청한 자동 완성 제안 최대 수를 지정합니다. 일반적으로 이 설정은 기본값인 1000으로 두어야 합니다.

    이 옵션을 0으로 설정하여 브라우저 캐싱을 완전히 비활성화할 수 있지만 사용하지 않는 것이 좋습니다.

    양식 이름

    자동 완성 사용 검색 양식의 "form" 태그의 "name" 속성을 지정합니다. 예:

    <form name="SiteSearch" method="get" action="https://sp1004337c.guided.t1.atomz.com" target="_blank">

    여기서 SiteSearch 는 양식 태그의 이름 속성입니다.

    Div 태그 ID

    자동 완성 지원 검색 양식의 "div" 태그의 ID 속성을 지정합니다. 예:

    <div id="autocomplete">

    여기서 autocomplete 는 div 태그의 속성입니다.

    입력 태그 ID

    자동 완성 사용 검색 양식의 "입력" 태그의 ID 속성을 지정합니다. 예:

    <input type="text" id="q" name="q" />

    여기서 q 은 입력 태그의 id 속성입니다.

    그림자 표시

    자동 완성 제안 목록에 코스메틱 그림자 효과를 추가합니다.

    구 시작 부분에만 일치

    입력 텍스트의 시작 부분과 일치하는 결과만 제안합니다.

    UTF-8 문자 집합 지원

    ASCII가 아닌 문자를 용어에서 올바르게 처리할 수 있습니다.

  3. 클릭 Save Changes.

  4. (선택 사항) 다음 중 하나를 수행합니다.

자동 완성 단어 목록 구성

자동 완성이 고객에게 제안으로 표시하는 단어 및 구문 목록을 구성합니다.

자동 완료 구성을 참조하십시오.

자동 완성 CSS 구성을 참조하십시오.

자동 완성 단어 목록을 구성하려면

  1. 제품 메뉴에서 Design > Auto-Complete > Auto-Complete Word List​를 클릭합니다.

  2. Auto-Complete Word List 페이지에서 원하는 옵션을 설정합니다.

    자세한 내용은 검색 양식이.

    옵션

    설명

    인기 검색어 기간

    고객의 최근 검색에서 단어와 구문을 포함할 기간을 제어합니다.

    최대 검색 수

    자동 완성 단어 목록에 포함할 검색어 및 구문의 최대 수를 제어합니다. 또한 가장 인기 있는 상위 단어와 구문이 포함되어 있습니다.

    필드 이름

    각 필드 이름은 인덱스 값을 포함할 필드 이름을 정의합니다. 필드 이름을 추가하거나 제거하려면 + 및 -를 사용합니다.

    최대 값 수

    선택한 필드 이름에 대해 허용되는 최대 필드 값 수를 정의합니다. 가장 많이 참조되는 상위 값이 포함됩니다.

    다음 단어 및 구문 추가

    자동 완성 단어 목록은 이 영역에 나열된 단어와 구문으로 채워집니다.

    목록을 보거나 목록에 단어 및 구문을 추가하려면 편집을 클릭합니다. 완료되면 변경 내용 저장 을 클릭합니다.

    다음 단어 및 구문 제거

    이 영역의 항목은 자동 완성 단어 목록에 표시되지 않습니다.

    목록을 보거나 목록에 단어 및 구문을 추가하려면 편집을 클릭합니다. 완료되면 변경 내용 저장 을 클릭합니다.

    이 목록에는 정규 표현식이 허용됩니다. 이 목록에서 정규 표현식을 지정하려면 regexp 행을 시작하고 그 다음에 단일 공간을 추가한 다음 정규 표현식을 입력합니다. 단어 목록의 일반 표현식과 일치하는 모든 줄이 제거됩니다.

    중요:일반 표현식은 이전에 다른 응용 프로그램에서 작업한 경우에만 사용해야 합니다.

    정규 표현식 을 참조하십시오.

    대/소문자 무시

    자동 완성 단어 목록의 알파벳 대문자/소문자만 다른 중복 항목은 제거됩니다.모든 단어 목록 항목은 소문자로 강제 지정됩니다.

    자동 완성 제안을 "첫 번째 대문자" 또는 "모두 대문자"로 표시하려면 text-transform : capitalize; 또는 text-transform : uppercase; 결과 항목의 "/* 스타일 */"에서 자동 완성 CSS 콘텐츠에 대한 CSS 텍스트 속성

    자동 완성 CSS 구성을 참조하십시오.

    다시 색인에 대한 업데이트

    자동 완성 단어 목록은 성공한 각 계정의 재색인을 완료한 후 자동으로 다시 생성됩니다.

  3. 클릭 Save Changes.

  4. (선택 사항) 다음 중 하나를 수행합니다.

    • History​을 클릭하여 변경한 내용을 되돌립니다.

    • Preview Word List​을 클릭하여 변경 내용을 저장한 다음 자동 완료 제안 목록을 검토할 수 있는 Auto-Complete Word List Preview 페이지를 엽니다. 페이지 상단 근처에 있는 탐색 옵션을 사용하여 표시된 목록을 검토하고 세분화합니다. 완료되면 Close​을 클릭하여 Auto-Complete Word List 페이지로 돌아갑니다.

      작업 내역 옵션 사용을 참조하십시오.

    • 클릭 Live.

      라이브 설정 보기를 참조하십시오.

    • 클릭 Push Live.

      스테이지 설정 라이브 푸시를 참조하십시오.

자동 완성 CSS 구성

자동 완성 CSS를 사용하여 사용할 CSS 자동 완성 스타일 시트를 구성합니다.

자동 완성 CSS는 자동 완성 검색 양식의 일부로 포함된 autocomplete_styles.css의 컨텐츠를 제어합니다. 여기서 지정하는 CSS는 자동 완료 제안 목록의 시각적 프레젠테이션을 제어합니다. 가능한 시각적 프레젠테이션 아이디어의 예를 보려면 다음을 참조하십시오.

https://developer.yahoo.com/yui/examples/autocomplete/ac_skinning.html.

자동 완성 단어 목록 구성을 참조하십시오.

자동 완성 구성.

자동 완성 CSS 구성을 마쳤으면 지정한 CSS가 모양 및 레이아웃에서 허용되는지 확인하기 위해 검색 양식을 미리 볼 수 있습니다.

자세한 내용은 검색 양식이.

중요:사용자 지정 자동 완성 CSS를 적용하려면 HTML 코드에 나타나는 두 번째 줄에서 주석 태그를 제거해야 합니다. 그런 다음 검색 양식이 포함된 페이지의 헤드 섹션 내에서 동일한 줄을 이동합니다.

자세한 내용은 검색 양식의 HTML 코드를.

자동 완성 CSS를 구성하려면

  1. 제품 메뉴에서 Design > Auto-Complete > Auto-Complete CSS​를 클릭합니다.

  2. Auto-Complete CSS 텍스트 필드에서 자동 완성 제안 목록과 연결할 CSS 스타일 시트 정보를 붙여넣거나 입력합니다.

  3. 클릭 Save Changes.

  4. (선택 사항) 다음 중 하나를 수행합니다.

웹 사이트에 나타나는 검색 양식 미리 보기

자동 완성 및 자동 완성 CSS의 구성에 따라 HTML 코드를 웹 사이트에 추가하는 경우 검색 양식이 어떻게 표시되는지 미리 볼 수 있습니다.

자동 완료 구성을 참조하십시오.

자동 완성 CSS 구성을 참조하십시오.

자세한 내용은 검색 양식의 HTML 코드를.

검색 양식에 컬렉션 사용을 참조하십시오.

양식이 있는 프레임 사용을 참조하십시오.

고급 검색 양식 샘플을 참조하십시오.

고급 검색 양식 HTML 코드를 참조하십시오.

고급 검색 양식 템플릿 코드를 참조하십시오.

웹 사이트에 나타나는 검색 양식을 미리 보려면

  1. 제품 메뉴에서 Design > Auto-Complete > Search Form​를 클릭합니다.
  2. (선택 사항) HTML code​을 클릭하여 웹 사이트의 페이지에 복사하여 붙여넣는 HTML을 확인합니다.

검색 양식의 HTML 코드를 웹 사이트 페이지에 복사

자동 완성 및 자동 완성 CSS의 구성에 따라 HTML 코드를 웹 사이트에 추가하는 경우 검색 양식이 어떻게 표시되는지 미리 볼 수 있습니다.

자동 완료 구성을 참조하십시오.

자동 완성 CSS 구성을 참조하십시오.

자세한 내용은 검색 양식의 HTML 코드를.

검색 양식에 컬렉션 사용을 참조하십시오.

양식이 있는 프레임 사용을 참조하십시오.

고급 검색 양식 샘플을 참조하십시오.

고급 검색 양식 HTML 코드를 참조하십시오.

고급 검색 양식 템플릿 코드를 참조하십시오.

검색 양식의 HTML 코드를 웹 사이트의 페이지에 복사하려면

  1. 제품 메뉴에서 Design > Auto-Complete > Form Source​를 클릭합니다.

    노트

    양식 소스의 form name= 값을 변경하지 마십시오.

  2. (선택 사항) 다음 중 하나를 수행합니다.

    • 자동 완성 CSS를 구성하고 스타일을 검색 양식에 적용하려면 HTML 코드에 나타나는 두 번째 행에서 주석 태그를 제거합니다. 그런 다음 검색 양식이 포함된 페이지의 헤드 섹션 내에서 동일한 줄을 이동합니다.
    • 성능을 최대화하려면 HTML 코드 아래쪽에 나열된 태그를 이동하여 검색 양식이 포함된 각 페이지의 본문 섹션 아래에 배치합니다.
  3. 코드를 복사하여 검색 양식을 표시할 웹 사이트의 웹 페이지에 붙여넣습니다.

이 페이지에서는

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now