Widget Penelusuran Pustaka Pengetahuan adalah modul JavaScript yang membantu Anda menambahkan topik ke kotak input di situs Anda. Pengguna mulai mengetik teks dan widget menemukan kecocokan yang relevan selagi mengetik, menggunakan Search API Pustaka Pengetahuan.
Fitur
- Lintas browser - ditulis dalam Penutupan yang teruji dengan baik dan lintas browser serta dikompilasi ke JavaScript murni.
- Lintas-domain. Tidak perlu server proxy berkat JSONP.
- Dihosting di server Google.
- Gratis! (Persyaratan Google API standar berlaku.)
Mengapa menggunakan Widget Penelusuran Pustaka Pengetahuan?
- Memungkinkan pengguna lebih sedikit mengetik untuk memasukkan lebih banyak data.
- Membuat entri data lebih mudah dan akurat.
- Kurangi beban kognitif pada pengguna dengan memberikan gambar dan deskripsi.
- Hindari nama duplikat untuk entitas yang sama: Puff Daddy, P. Diddy, Sean Combs semuanya merujuk pada
/en/sean_combs.
Menambahkan Widget Penelusuran Pustaka Pengetahuan ke situs Anda
Untuk menambahkan Widget Penelusuran Pustaka Pengetahuan ke halaman, sertakan kode berikut di sumber situs Anda. Anda harus menggunakan kunci API agar widget dapat mengakses Google Knowledge Graph API.
Kode untuk disertakan dalam situs Anda
Sertakan hal berikut dalam <head> pada dokumen HTML Anda:
<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>
Kemudian, di dokumen <body>, gunakan kolom input dengan ID yang cocok, seperti ini:
<input type="text" id="myInput">
<script type="text/javascript">
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
</script>
Mendapatkan dan menggunakan kunci API
Memperoleh kunci API memungkinkan aplikasi Anda membuat permintaan Saran. Tanpa kunci API, widget tidak akan berfungsi. Jika belum memiliki kunci API, ikuti petunjuk di halaman Prasyarat untuk mendapatkannya.
Setelah Anda mendapatkan kunci, teruskan ke Widget Penelusuran Grafik Pengetahuan menggunakan kode seperti berikut:
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
Mengonfigurasi widget penelusuran
JavaScript Anda dapat memanggil KGSearchWidget() dengan argumen ketiga kosong seperti
yang ditunjukkan di atas. Atau, Anda dapat menggunakan argumen ketiga ini untuk meneruskan objek konfigurasi, dengan menentukan berbagai pemfilteran, batasan, dan pengendali peristiwa.
Meneruskan objek konfigurasi
Widget Penelusuran Pustaka Pengetahuan menerima parameter konfigurasi opsional. Hal ini memungkinkan Anda mengisi struktur data dengan beberapa opsi konfigurasi, dan meneruskannya ke widget seperti yang ditunjukkan dalam contoh berikut.
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);
Opsi konfigurasi
Tabel berikut menjelaskan opsi konfigurasi yang dapat Anda teruskan ke Widget Penelusuran Grafik Pengetahuan.
| Nama | Jenis | Default | Deskripsi |
|---|---|---|---|
| bahasa | Array(String) | Inggris |
Daftar kode bahasa (ditentukan dalam ISO 639-1) yang menyebabkan penelusuran dilakukan dalam semua bahasa yang ditentukan. Hasilnya akan diberi peringkat dalam bahasa pertama yang tercantum dan ditampilkan dalam bahasa pertama dalam daftar yang memiliki nama untuk entity. Bahasa Inggris memiliki liputan terbanyak. Nilai ini diteruskan secara transparan ke Search API. Misalnya, jika bahasa disetel ke [fr, en] |
| batas | Bilangan Bulat | 20 | Jumlah hasil maksimal di menu dropdown. |
| tipe | Array(String) | Semua jenis | Hanya tampilkan entity yang cocok dengan jenis entity yang disediakan. Jika parameter ini dihilangkan, tampilkan kecocokan dari jenis entity apa pun. |
| maxDescChars | Bilangan Bulat | Tidak terbatas | Jumlah karakter maksimum dalam deskripsi mendetail setiap entitas. Konten yang lebih panjang dari maxDescChars akan terpotong. |
| selectHandler | Fungsi | null |
Fungsi callback yang akan dipanggil saat baris dipilih. Argumen fungsi callback adalah sebuah peristiwa, dan menyertakan atribut row yang berisi informasi tentang baris yang dipilih. Lihat Menggunakan pengendali peristiwa untuk mengetahui contoh penggunaan callback ini.
|
| highlightHandler | Fungsi | null |
Fungsi callback yang dipanggil saat pengguna mengarahkan kursor ke baris.
Argumen fungsi callback adalah sebuah peristiwa, dan menyertakan atribut row yang berisi informasi tentang baris yang dipilih.
Perhatikan bahwa banyak perangkat (seperti hardware seluler layar sentuh) tidak dapat membuat peristiwa ini. Lihat Menggunakan pengendali peristiwa untuk mengetahui contoh penggunaan callback ini. |
Mengimplementasikan pengendali peristiwa
Widget Penelusuran Pustaka Pengetahuan memicu peristiwa berikut dalam konteks input yang diinisialisasi dengannya. Anda dapat menyediakan fungsi callback di objek konfigurasi untuk menerapkan pengendali peristiwa ini.
selectHandler — Peristiwa ini dipicu saat pengguna memilih item dari daftar Saran. Peristiwa tersebut disertai dengan objek data dengan event.row yang merupakan data dari baris yang dipilih.
event.row.name dan event.row.id mewakili nama dan
ID item yang dipilih. Fragmen kode berikut menunjukkan cara menguji fungsi
selectHandler.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"selectHandler": function(e) {
alert("selected " + e.row.name);
}
});
highlightHandler — Peristiwa ini dipicu saat item ditandai oleh pengguna yang mengarahkan kursor ke atasnya. Cuplikan berikut menunjukkan cara menguji fungsi
highlightHandler.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"highlightHandler": function(e) {
alert("highlighted " + e.row.name);
}
});
Bantuan dan masukan
Jika ada pertanyaan, laporan bug, atau masukan tentang Search API Pustaka Pengetahuan, gunakan Forum Bantuan.