Tiện ích Tìm kiếm Sơ đồ tri thức là một mô-đun JavaScript giúp bạn thêm các chủ đề vào hộp nhập trên trang web của mình. Người dùng bắt đầu nhập văn bản và tiện ích này sẽ tìm các kết quả phù hợp khi họ nhập bằng cách sử dụng API Tìm kiếm sơ đồ tri thức.
Tính năng
- Trên nhiều trình duyệt – mã này được viết dưới dạng Đóng trên nhiều trình duyệt và đã được kiểm thử tốt, đồng thời được biên dịch thành JavaScript thuần túy.
- Nhiều miền. Không cần máy chủ proxy nhờ JSONP.
- Được lưu trữ trên máy chủ của Google.
- Miễn phí! (Có áp dụng Điều khoản API của Google tiêu chuẩn.)
Tại sao bạn nên sử dụng Tiện ích Tìm kiếm Sơ đồ tri thức?
- Cho phép người dùng nhập ít dữ liệu hơn để nhập được nhiều dữ liệu hơn.
- Giúp việc nhập dữ liệu dễ dàng và chính xác hơn.
- Hãy cung cấp hình ảnh và nội dung mô tả để giảm tải nhận thức của người dùng.
- Tránh dùng tên trùng lặp cho cùng một mục: Puff Daddy, P. Diddy, nghệ sĩ kỹ thuật số âm thanh Him Combs đều đề cập đến
/en/sean_combs.
Thêm Tiện ích tìm kiếm sơ đồ tri thức vào trang web của bạn
Để thêm Tiện ích Tìm kiếm Sơ đồ tri thức vào một trang, hãy đưa mã sau vào nguồn trang web của bạn. Bạn cần sử dụng khoá API để tiện ích này có thể truy cập vào API Sơ đồ tri thức của Google.
Mã cần đưa vào trang web của bạn
Đưa thông tin sau vào <head> của tài liệu HTML:
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.css">
<style>
.kge-search-picker {
width: <DROPDOWN_MENU_WIDTH>;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.js"></script>
Sau đó, trong tài liệu <body>, hãy sử dụng trường nhập dữ liệu có mã nhận dạng phù hợp, như sau:
<input type="text" id="myInput">
<script type="text/javascript">
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
</script>
Lấy và sử dụng khoá API
Việc lấy khoá API cho phép ứng dụng của bạn đưa ra yêu cầu Đề xuất. Nếu không có khoá API, tiện ích này sẽ không hoạt động. Nếu bạn chưa có khoá API, hãy làm theo hướng dẫn trên trang Điều kiện tiên quyết để nhận khoá.
Sau khi bạn có được khoá, hãy truyền khoá đó vào Tiện ích Tìm kiếm Sơ đồ tri thức bằng cách sử dụng mã như sau:
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
Định cấu hình tiện ích tìm kiếm
JavaScript của bạn có thể gọi KGSearchWidget() với một đối số thứ ba trống như hiển thị ở trên. Hoặc bạn có thể sử dụng đối số thứ ba này để truyền vào một đối tượng cấu hình, chỉ định các bộ lọc, quy tắc ràng buộc và trình xử lý sự kiện khác nhau.
Truyền một đối tượng cấu hình
Tiện ích Tìm kiếm Sơ đồ tri thức chấp nhận một thông số cấu hình không bắt buộc. Điều này cho phép bạn điền nhiều tuỳ chọn cấu hình vào một cấu hình dữ liệu và truyền cấu hình đó vào tiện ích như trong ví dụ sau.
var config = {
'limit': 10,
'languages': ['en', 'fr'],
'types': ['Person', 'Movie'],
'maxDescChars': 100,
};
config['selectHandler'] = function(e) {
alert(e.row.name + ' selected');
};
config['highlightHandler'] = function(e) {
alert(e.row.name + ' highlighted');
};
KGSearchWidget(<API_KEY>, document.getElementById('myInput'), config);
Các lựa chọn về cấu hình
Bảng sau đây mô tả các tuỳ chọn cấu hình mà bạn có thể chuyển đến Tiện ích tìm kiếm Sơ đồ tri thức.
| Tên | Loại | Mặc định | Nội dung mô tả |
|---|---|---|---|
| ngôn ngữ | Array(Chuỗi) | Tiếng Anh |
Danh sách mã ngôn ngữ (được định nghĩa trong ISO 639-1) có thể thực hiện tìm kiếm bằng tất cả các ngôn ngữ đã chỉ định. Kết quả được xếp hạng theo ngôn ngữ đầu tiên được liệt kê và hiển thị bằng ngôn ngữ đầu tiên trong danh sách có tên của thực thể. Tiếng Anh được sử dụng phổ biến nhất. Giá trị này được truyền một cách rõ ràng đến API Tìm kiếm. Ví dụ: nếu ngôn ngữ được đặt thành [fr, en] |
| giới hạn | Số nguyên | 20 | Số lượng kết quả tối đa trong trình đơn thả xuống. |
| loại | Array(Chuỗi) | Mọi loại | Chỉ trả về các thực thể khớp với bất kỳ loại thực thể nào đã cho. Nếu tham số này bị bỏ qua, hãy trả về các kết quả khớp của bất kỳ loại thực thể nào. |
| maxDescChars | Số nguyên | Vé loại không giới hạn | Số lượng ký tự tối đa trong phần mô tả chi tiết về mỗi mục. Nội dung dài hơn maxDescChars sẽ bị cắt bớt. |
| selectHandler | Chức năng | null |
Hàm callback để gọi khi bạn chọn một hàng. Đối số của hàm callback là một sự kiện và bao gồm thuộc tính row chứa thông tin về hàng đã chọn. Hãy xem phần Sử dụng trình xử lý sự kiện để biết ví dụ về cách sử dụng lệnh gọi lại này.
|
| highlightHandler | Chức năng | null |
Hàm callback được gọi khi người dùng di chuột qua hàng đó.
Đối số của hàm callback là một sự kiện và bao gồm thuộc tính row chứa thông tin về hàng đã được chọn.
Xin lưu ý rằng nhiều thiết bị (chẳng hạn như phần cứng của thiết bị di động có màn hình cảm ứng) không thể tạo sự kiện này. Hãy xem phần Sử dụng trình xử lý sự kiện để biết ví dụ về cách sử dụng lệnh gọi lại này. |
Triển khai trình xử lý sự kiện
Tiện ích tìm kiếm sơ đồ tri thức kích hoạt các sự kiện sau đây trong ngữ cảnh của dữ liệu đầu vào mà tiện ích đó được khởi động. Bạn có thể cung cấp các hàm callback trong đối tượng cấu hình để triển khai trình xử lý cho những sự kiện này.
selectHandler – Sự kiện này được kích hoạt khi người dùng chọn một mục
trong danh sách Đề xuất. Sự kiện này đi kèm với một đối tượng dữ liệu, trong đó event.row là dữ liệu của hàng đã chọn.
event.row.name và event.row.id biểu thị tên và mã nhận dạng của mục đã chọn. Đoạn mã sau đây cho bạn biết cách kiểm thử chức năng của selectHandler.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"selectHandler": function(e) {
alert("selected " + e.row.name);
}
});
highlightHandler – Sự kiện này được kích hoạt khi người dùng di chuột qua một mục được làm nổi bật. Đoạn mã sau đây cho bạn biết cách kiểm thử tính năng của highlightHandler.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"highlightHandler": function(e) {
alert("highlighted " + e.row.name);
}
});
Trợ giúp và phản hồi
Nếu bạn có thắc mắc, báo cáo lỗi hoặc ý kiến phản hồi về API Tìm kiếm sơ đồ tri thức, hãy sử dụng Diễn đàn trợ giúp.