자동 완성 정보

자동 완성 기능이 활성화된 검색 양식 및 자동 완성 사용 검색 양식의 일부로 포함된 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는 자동 완성 검색 양식의 일부로 포함된 autocomplete_styles.css의 콘텐츠를 제어합니다. 여기서 지정하는 CSS는 자동 완성 제안 목록의 시각적 프레젠테이션을 제어합니다. 가능한 시각적 프레젠테이션 아이디어의 예는 다음을 참조하십시오.

자동 완성 단어 목록 구성.

자동 완료 구성.

자동 완성 CSS 구성을 마치면 검색 양식을 미리 보고 지정한 CSS가 모양 및 레이아웃에서 허용되는지 확인할 수 있습니다.

검색 양식 미리 보기 를 참조하십시오.🔗.

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

검색 양식의 HTML 코드를 다음 위치에 복사….

자동 완성 CSS를 구성하려면

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

  2. Auto-Complete 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. 코드를 복사하여 검색 양식을 표시할 웹 사이트의 웹 페이지에 붙여넣습니다.

이 페이지에서는