지식 그래프 검색 위젯은 사이트의 입력 상자에 주제를 추가할 수 있는 자바스크립트 모듈입니다. 사용자가 텍스트를 입력하기 시작하면 위젯이 Knowledge Graph Search API를 사용하여 입력과 관련된 일치 항목을 찾습니다.
기능
- 교차 브라우저 - 충분한 테스트를 거친 교차 브라우저 클로저로 작성되며 순수 자바스크립트로 컴파일됩니다.
- 교차 도메인 JSONP 덕분에 프록시 서버가 필요하지 않습니다.
- Google 서버에서 호스팅됩니다.
- 무료! (표준 Google API 약관이 적용됩니다.)
지식 그래프 검색 위젯을 사용해야 하는 이유
- 사용자가 더 많은 데이터를 입력할 수 있도록 정보를 적게 입력하세요.
- 데이터를 보다 쉽고 정확하게 입력할 수 있습니다.
- 이미지와 설명을 제공하여 사용자의 인지 부하를 줄입니다.
- 동일한 항목에 대한 중복 이름을 사용하지 않습니다(퍼프 대디, P). 디디, 숀 콤스 모두
/en/sean_combs을 지칭합니다.
웹사이트에 지식 그래프 검색 위젯 추가하기
페이지에 지식 그래프 검색 위젯을 추가하려면 웹사이트 소스에 다음 코드를 포함하세요. 위젯이 Google Knowledge Graph API에 액세스할 수 있도록 하려면 API 키를 사용해야 합니다.
웹사이트에 포함할 코드
HTML 문서의 <head>에 다음을 포함해야 합니다.
<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>
그런 다음 <body> 문서에서 다음과 같이 일치하는 ID가 있는 입력란을 사용합니다.
<input type="text" id="myInput">
<script type="text/javascript">
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
</script>
API 키 가져오기 및 사용하기
API 키를 얻으면 애플리케이션에서 추천 요청을 할 수 있습니다. API 키가 없으면 위젯이 작동하지 않습니다. 아직 API 키가 없으면 기본 요건 페이지의 안내에 따라 API 키를 가져옵니다.
키를 가져온 후 다음과 같은 코드를 사용하여 지식 그래프 검색 위젯에 전달합니다.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
검색 위젯 구성하기
JavaScript는 위와 같이 빈 세 번째 인수를 사용하여 KGSearchWidget()를 호출할 수 있습니다. 또는 이 세 번째 인수를 사용하여 다양한 필터링, 제약 조건, 이벤트 핸들러를 지정하여 구성 객체를 전달할 수 있습니다.
구성 객체 전달
지식 그래프 검색 위젯은 선택적 구성 매개변수를 허용합니다. 이렇게 하면 다음 예와 같이 여러 구성 옵션으로 데이터 구조를 채우고 이를 위젯에 전달할 수 있습니다.
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);
구성 옵션
다음 표에서는 지식 그래프 검색 위젯에 전달할 수 있는 구성 옵션을 설명합니다.
| 이름 | 유형 | 기본 계정 | 설명 |
|---|---|---|---|
| 언어 | 배열(문자열) | 영어 |
지정된 모든 언어로 검색을 수행하는 언어 코드 목록(ISO 639-1에 정의됨)입니다. 결과는 나열된 첫 번째 언어로 순위가 지정되고 항목 이름이 있는 목록에서 첫 번째 언어로 표시됩니다. 영어가 가장 많이 제공됩니다. 이 값은 Search API에 투명하게 전달됩니다. 예를 들어 언어가 [fr, en]로 설정된 경우 |
| 제한 | 정수 | 20 | 드롭다운 메뉴의 최대 결과 수입니다. |
| types | 배열(문자열) | 모든 유형 | 제공된 항목 유형과 일치하는 항목만 반환합니다. 이 매개변수가 생략되면 모든 항목 유형과 일치하는 항목을 반환합니다. |
| maxDescChars | 정수 | 무제한 | 각 항목에 대한 상세 설명의 최대 문자 수입니다. maxDescChars보다 긴 콘텐츠는 잘립니다. |
| selectHandler | 함수 | null |
행이 선택되면 호출할 콜백 함수입니다. 콜백 함수의 인수는 이벤트이며, 여기에는 선택된 행에 대한 정보가 포함된 row 속성이 포함됩니다. 이 콜백 사용의 예는 이벤트 핸들러 사용을 참고하세요.
|
| highlightHandler | 함수 | null |
사용자가 행 위로 마우스를 가져가면 호출되는 콜백 함수입니다.
콜백 함수의 인수는 이벤트이며, 여기에는 선택된 행에 대한 정보가 포함된 row 속성이 포함됩니다.
터치스크린 모바일 하드웨어와 같은 다수의 기기는 이 이벤트를 생성할 수 없습니다. 이 콜백 사용의 예는 이벤트 핸들러 사용을 참고하세요. |
이벤트 핸들러 구현
지식 그래프 검색 위젯은 초기화되는 입력의 컨텍스트 내에서 다음 이벤트를 트리거합니다. 구성 객체에 콜백 함수를 제공하여 이러한 이벤트의 핸들러를 구현할 수 있습니다.
selectHandler — 이 이벤트는 사용자가 추천 목록에서 항목을 선택할 때 트리거됩니다. 이 이벤트는 데이터 객체가 수반되며, 여기서 event.row는 선택된 행의 데이터입니다.
event.row.name와 event.row.id는 선택된 항목의 이름과 ID를 나타냅니다. 다음 코드 프래그먼트는 selectHandler의 기능을 테스트하는 방법을 보여줍니다.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"selectHandler": function(e) {
alert("selected " + e.row.name);
}
});
highlightHandler — 이 이벤트는 사용자가 항목 위로 마우스를 가져가면 항목이 강조 표시될 때 트리거됩니다. 다음 스니펫은 highlightHandler의 기능을 테스트하는 방법을 보여줍니다.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"highlightHandler": function(e) {
alert("highlighted " + e.row.name);
}
});
고객센터
Knowledge Graph Search API에 관한 질문, 버그 신고 또는 의견이 있으면 도움말 포럼을 사용하세요.