자동 완성 정보

자동 완성의 다양한 영역을 구성하여 자동 완성이 활성화된 검색 양식의 생성을 제어할 수 있으며 자동 완성 사용 검색 양식의 일부로 포함된 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 붙습니다. 단어 목록의 정규 표현식과 일치하는 모든 줄이 제거됩니다.

    중요:일반 표현식은 이전에 다른 애플리케이션에서 작업한 경우에만 사용해야 합니다.

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

    대/소문자 무시

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

    자동 완성 제안이 "첫 번째 글자 대문자" 또는 "모두 대문자"로 나타나도록 하려면 결과 항목의 "/*%20%EC%8A%A4%ED%83%80%EC%9D%BC?lang=ko"에서 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. 코드를 복사하여 검색 양식을 표시할 웹 사이트의 웹 페이지에 붙여넣습니다.

이 페이지에서는