이 페이지는 Cloud Translation API를 통해 번역되었습니다.

검색창 구현

프로그래밍 검색 엔진을 만들면 사이트에 프로그래밍 검색 요소를 추가할 수 있습니다. 이렇게 하려면 코드를 복사하여 검색엔진을 표시하려는 사이트의 HTML에 붙여넣어야 합니다.

Control Panel에서 사용할 검색엔진을 클릭합니다.
개요 페이지의 기본 섹션에서 코드 가져오기를 클릭합니다. 코드를 복사하여 프로그래밍 검색 요소를 표시하려는 페이지의 HTML 소스 코드에 붙여넣습니다.

<div class="gcse-search"></div> 요소는 자리표시자입니다. 여기에서 검색 요소 (검색창과 검색결과 모두)가 렌더링됩니다.

<script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script>

<div class="gcse-search"></div>

다양한 레이아웃 시도

검색창은 검색결과와 별도로 표시되는 것이 좋은 경우가 많습니다. 2열 레이아웃을 사용하면 페이지의 한 영역 (예: 사이드바)에 검색창을 렌더링하고 다른 영역 (예: 페이지의 기본 영역)에 검색결과를 표시할 수 있습니다.

엔진 레이아웃을 변경하려면 제어판의 디자인 페이지에서 레이아웃 섹션으로 이동하세요. Control Panel에서 2열 레이아웃을 선택하고 저장한 후 검색 요소에 대한 HTML 코드도 변경해야 합니다.

<script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script>

<div style="border: 1px solid blue;">
    Area 1 (for example a sidebar)
    <div class="gcse-searchbox"></div>
</div>

<div style="border: 1px solid red;">
    Area 2 (for example main area of the page)
    <div class="gcse-searchresults"></div>
</div>

또 다른 흥미로운 레이아웃은 두 페이지 옵션입니다. 한 페이지에 나만의 검색창을 구현하고 주소 표시줄의 매개변수를 사용하여 다른 페이지에 표준 검색결과를 렌더링할 수 있습니다.

Control Panel에서 두 페이지 레이아웃을 선택하고 저장합니다. 한 페이지에서 독립형 검색창을 구현하여 결과를 표시할 URL을 가리키도록 resultsUrl 속성을 변경합니다.

<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchbox-only" data-resultsUrl="YOUR_RESULTS_PAGE_URL"></div>

사용해 보기

독립된 검색결과 페이지를 구현하려면 결과 코드 스니펫을 결과 페이지에 붙여넣습니다.

<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>

이제 URL에 'q' 인수를 전달하여 이 페이지에서 검색결과를 트리거할 수 있습니다.

https://my-results-page-url.com/?q=myQuery

주소 표시줄의 q=myQuery 매개변수를 확인합니다. 이를 통해 <div class="gcse-searchresults-only"></div> 요소는 표시할 쿼리 결과를 알 수 있습니다.

사용해 보기

다음...

자동 완성 사용 설정하기를 참고하세요.