검색창 구현

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

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

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

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

다양한 레이아웃 사용해 보기

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

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

<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>

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

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

<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>

이제 'q' 인수를 사용할 수 있습니다.

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

주소 표시줄의 q=myQuery 매개변수를 확인합니다. 이는 <div class="gcse-searchresults-only"></div> 요소가 표시할 쿼리 결과를 아는 방법입니다.

직접 해 보기

다음...

계속해서 자동 완성 사용 설정을 진행합니다.