Triển khai hộp tìm kiếm

Sau khi tạo Công cụ tìm kiếm có thể lập trình, bạn có thể thêm Phần tử tìm kiếm có thể lập trình vào trang web của mình. Để thực hiện điều này, bạn cần sao chép một số mã và dán mã đó vào HTML của trang web nơi bạn muốn công cụ tìm kiếm của mình xuất hiện.

  1. Trong Bảng điều khiển, hãy nhấp vào công cụ tìm kiếm mà bạn muốn sử dụng.
  2. Trong phần Cơ bản của trang Tổng quan, hãy nhấp vào Nhận mã. Sao chép mã rồi dán vào mã nguồn HTML của trang mà bạn muốn Phần tử tìm kiếm có thể lập trình xuất hiện.

Phần tử <div class="gcse-search"></div> là phần giữ chỗ – đây là nơi phần tử tìm kiếm (cả hộp tìm kiếm và kết quả tìm kiếm) sẽ hiển thị.

<!-- Chèn Mã công cụ tìm kiếm có thể lập trình của riêng bạn tại đây --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<div class="gcse-search"></div>

Thử dùng các bố cục khác

Trong nhiều trường hợp, việc có hộp tìm kiếm xuất hiện độc lập với kết quả tìm kiếm là điều hợp lý. Bố cục hai cột cho phép bạn kết xuất hộp tìm kiếm trong một vùng của trang (chẳng hạn như trong thanh bên) và hiển thị các kết quả trong một vùng khác (chẳng hạn như vùng chính của trang).

Để thay đổi bố cục của công cụ, hãy chuyển đến mục Layout (Bố cục) trên trang Giao diện trong Control Panel (Bảng điều khiển). Sau khi chọn và lưu bố cục 2 cột trong Bảng điều khiển, bạn cũng cần thay đổi mã HTML cho Phần tử tìm kiếm.

<!-- Chèn Mã công cụ tìm kiếm có thể lập trình của riêng bạn tại đây --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<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>

Một bố cục thú vị khác là tuỳ chọn hai trang. Công cụ này cho phép bạn triển khai hộp tìm kiếm của riêng mình trên một trang và hiển thị kết quả tìm kiếm chuẩn trên một trang khác bằng cách sử dụng các tham số trong thanh địa chỉ.

Chọn và lưu bố cục hai trang trong Bảng điều khiển. Trên một trang, hãy triển khai một hộp tìm kiếm độc lập, thay đổi thuộc tính resultsUrl để trỏ đến URL mà bạn muốn hiện kết quả.

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

Thử nào

Để triển khai trang kết quả tìm kiếm độc lập, hãy dán đoạn mã kết quả vào trang kết quả của bạn:

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

Giờ đây, bạn có thể kích hoạt kết quả tìm kiếm trên trang này bằng cách truyền "q" đối số trong url:

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

Lưu ý tham số q=myQuery trong thanh địa chỉ – đây là cách phần tử <div class="gcse-searchresults-only"></div> biết cần hiển thị kết quả truy vấn nào.

Thử nào

Tiếp theo...

Tiếp tục Bật tính năng tự động hoàn thành.