Tuỳ chỉnh kết quả tìm kiếm
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Theo cách tương tự như tuỳ chỉnh hộp tìm kiếm, bạn có thể thêm các tuỳ chọn bổ sung vào phần tử kết quả tìm kiếm.
Ví dụ: để thay đổi công cụ tìm kiếm của chúng tôi từ công cụ tìm kiếm dựa trên kết quả web
thành dựa trên hình ảnh, chúng ta có thể sử dụng thuộc tính defaultToImageSearch.
Trước tiên, bạn cần bật tính năng Tìm kiếm hình ảnh trong Bảng điều khiển cho công cụ tìm kiếm của mình. Trong mục Thiết lập, trong thẻ Cơ bản, hãy nhấp vào mục Tìm kiếm hình ảnh rồi nhấp vào nút "bật" vị trí. Sau đó, hãy thêm thuộc tính defaultToImageSearch vào phần tử <div class="gcse-searchresults"></div> trên trang web của bạn.
<!-- 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 -->
<script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script>
<!-- Hãy thử chuyển giá trị thuộc tính thành "true" hoặc "false" -->
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults" data-defaultToImageSearch="true"></div>
Giờ đây, khi bạn tìm kiếm nội dung nào đó, thẻ tìm kiếm hình ảnh sẽ hiển thị theo mặc định.
Có nhiều lựa chọn khác. Bạn có thể đọc về các lựa chọn tuỳ chỉnh khác cho kết quả tìm kiếm trong phần API Điều khiển phần tử tìm kiếm có thể lập trình.
Tiếp theo...
Tiếp tục chuyển đến phần Các bước tiếp theo.
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-07-25 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-07-25 UTC."],[[["\u003cp\u003eThe search results element can be customized with additional options, such as switching to image-based results using the \u003ccode\u003edefaultToImageSearch\u003c/code\u003e attribute.\u003c/p\u003e\n"],["\u003cp\u003eTo enable image search, you need to activate it in the Control Panel for your search engine and then add the \u003ccode\u003edefaultToImageSearch\u003c/code\u003e attribute to the search results div element.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003edefaultToImageSearch\u003c/code\u003e attribute, when set to "true", makes the image search tab the default view for search results.\u003c/p\u003e\n"],["\u003cp\u003eFurther customization options for search results can be found in the Programmable Search Element Control API documentation.\u003c/p\u003e\n"]]],[],null,["# Customizing Search Results\n\nIn a similar way to customizing search box, you can add additional options to the search results element.\n\nFor example, in order to change our search engine from webresults-based\nto image-based, we can utilize the `defaultToImageSearch` attribute.\n\nFirst of all, you need to enable Image Search in the [Control Panel](https://programmablesearchengine.google.com) for your search engine. In the **Setup** section, in **Basics** tab, click the **Image search** option into the \"on\" position. After that, add the `defaultToImageSearch` attribute to the `\u003cdiv class=\"gcse-searchresults\"\u003e\u003c/div\u003e` element on your website. \n\\\u003c!-- Insert your own Programmable Search Engine ID here --\\\u003e \\\u003cscript async src=\"https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga\"\\\u003e\\\u003c/script\\\u003e \\\u003c!-- Try switching the attribute value to \"true\" or \"false\" --\\\u003e \n\n \u003cdiv class=\"gcse-searchbox\"\u003e\u003c/div\u003e\n \u003cdiv class=\"gcse-searchresults\" data-defaultToImageSearch=\"true\"\u003e\u003c/div\u003e\n\nNow, when you search for something, the image search tab is showing as a default.\n\nThere are many more options available. You can read about other search results customization options in [Programmable Search Element Control API](/custom-search/docs/element#supported_attributes) section.\n\nNext...\n-------\n\nContinue to [Next steps](/custom-search/docs/tutorial/nextsteps)."]]
